<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>视频合成</title>
    <style>
      /* 遮罩层 */
      .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1;
      }

      /* 弹窗样式 */
      .modal {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 20px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 2;
        width: 300px;
        text-align: center;
        border-radius: 10px;
      }

      /* 关闭按钮 */
      .close-btn {
        background-color: #f44336;
        color: white;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
        border-radius: 5px;
        margin-top: 10px;
      }

      .close-btn:hover {
        background-color: #d32f2f;
      }

      table {
        border-collapse: collapse;
        /* 合并边框 */
        border: none;
        /* 隐藏表格边框 */
      }

      th,
      td {
        border: none;
        /* 隐藏单元格边框 */
        padding: 10px;
        /* 添加一些内边距 */
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .container {
        padding: 20px;
      }

      /* 顶部标签样式 */
      .tab-nav {
        display: flex;
        border-bottom: 2px solid #e6e6e6;
        margin-bottom: 20px;
      }

      .tab-item {
        padding: 12px 24px;
        cursor: pointer;
        font-size: 20px;
        color: #666;
        position: relative;
      }

      .tab-item.active {
        color: #5048e5;
      }

      .tab-item.active::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #5048e5;
      }

      /* 二级导航样式 */
      .sub-nav {
        display: flex;
        margin-bottom: 20px;
      }

      .sub-nav-item {
        padding: 8px 16px;
        cursor: pointer;
        font-size: 20px;
        color: #666;
      }

      .sub-nav-item.active {
        color: #5048e5;
      }

      .search-box input {
        padding: 8px 12px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        width: 300px;
      }

      .btn-primary {
        padding: 8px 16px;
        background-color: #5048e5;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      .folder-path {
        padding: 8px 16px;
        background-color: #f5f5f5;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .video-thumbnail {
        position: relative;
        aspect-ratio: 16/9;
        background-color: #f5f5f5;
        overflow: hidden;
      }

      .video-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s;
      }

      .video-thumbnail:hover img {
        transform: scale(1.05);
      }

      .download-btn {
        position: absolute;
        right: 10px;
        bottom: 10px;
        padding: 6px 12px;
        background-color: #1890ff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.3s;
      }

      .video-thumbnail:hover .download-btn {
        opacity: 1;
      }

      .video-title {
        padding: 8px;
        font-size: 20px;
        color: #333;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .file-tree ul {
        list-style: none;
        padding-left: 20px;
      }

      .file-tree li {
        padding: 4px 0;
        font-size: 20px;
        color: #666;
        cursor: pointer;
      }

      /* 标签内容区域 */
      .tab-content {
        display: none;
        /* padding: 20px; */
      }

      .tab-content.active {
        display: block;
      }

      /*
	视频合成样式 */
      .synthesis-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        position: relative;
        padding-bottom: 200px;
        /*
	为底部设置留出空间 */
        font-size: 20px;
      }

      /* 字幕生成样式 */
      .subtitle-container {
        padding: 20px;
      }

      /* 任务时长提示样式 */
      .task-duration {
        color: #666;
        font-size: 20px;
        margin-bottom: 20px;
      }

      .subtitle-header {
        margin-bottom: 20px;
      }

      .subtitle-input {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .subtitle-title {
        font-size: 20px;
        color: #666;
        margin-bottom: 15px;
      }

      .subtitle-table table {
        width: 100%;
        border-collapse: collapse;
      }

      .subtitle-table th,
      .subtitle-table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #e6e6e6;
      }

      .subtitle-footer {
        margin-top: 20px;
        text-align: right;
      }

      /* 配音生成样式 */
      .voice-container {
        padding: 20px;
      }

      .voice-content {
        background: #fff;
        border-radius: 8px;
        /* padding: 20px; */
      }

      .voice-header {
        margin-bottom: 20px;
      }

      .voice-input {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .voice-input label {
        font-size: 20px;
        color: #666;
      }

      .voice-textarea {
        width: 100%;
        height: 120px;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 8px;
        resize: vertical;
        font-size: 20px;
      }

      .word-count {
        text-align: right;
        color: #999;
        font-size: 20px;
      }

      .voice-options {
        margin-top: 20px;
      }

      .option-group {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 20px;
      }

      .option-group label {
        font-size: 20px;
        color: #666;
        white-space: nowrap;
      }

      .language-buttons {
        display: flex;
        flex-direction: row;
        gap: 15px;
      }

      .btn-option {
        padding: 8px 16px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: #fff;
        cursor: pointer;
        font-size: 20px;
        white-space: nowrap;
        text-align: center;
      }

      .btn-option.active {
        background: #1890ff;
        color: white;
        border-color: #1890ff;
      }

      .voice-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
        margin: 20px 0;
      }

      .voice-card {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 10px;
        border-radius: 5px;
        cursor: pointer;
      }

      .voice-card.selected {
        border-color: blue;
      }

      .voice-avatar {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: #f0f0f0;
        text-align: center;
        line-height: 50px;
        border-radius: 50%;
      }

      .voice-name {
        display: inline-block;
        margin-left: 10px;
      }

      .voice-badge {
        margin-top: 10px;
      }

      /* 文案提取样式 */
      .content-container {
        padding: 20px;
        background: #fff;
      }

      .content-header {
        margin-bottom: 20px;
      }

      .content-input {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      .input-group {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .input-group label {
        font-size: 20px;
        color: #666;
        white-space: nowrap;
      }

      .input-group .long-input {
        flex: 1;
        height: 40px;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 20px;
      }

      .content-main {
        margin-bottom: 20px;
      }

      .content-title {
        font-size: 20px;
        color: #666;
        margin-bottom: 10px;
      }

      .content-textarea {
        width: 100%;
        height: 200px;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 8px;
        resize: vertical;
        font-size: 20px;
      }

      .word-count {
        text-align: right;
        color: #999;
        font-size: 20px;
        margin-top: 5px;
      }

      .content-footer {
        margin-top: 20px;
      }

      .button-group {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        margin: 20px 0;
        width: 20%;
      }

      .btn-option {
        padding: 8px 16px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: #fff;
        cursor: pointer;
        font-size: 20px;
        min-width: 100px;
        text-align: center;
      }

      .btn-option:hover {
        border-color: #1890ff;
        color: #1890ff;
      }

      /* 素材库布局 */
      .material-container {
        display: flex;
        gap: 20px;
        height: calc(100vh - 150px);
        margin-left: -20px;
        /* 抵消container的padding */
      }

      /* 左侧素材边栏样式 */
      .material-sidebar {
        width: 260px;
        background: linear-gradient(to right, #eef0fd, #ece8fe);
        padding: 20px;
        border-radius: 8px;
        margin: 0 20px;
        font-size: 20px;
      }

      .material-sidebar .sidebar-header {
        padding: 10px;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 15px;
        color: #666;
        font-size: 20px;
      }

      .open-file-btn {
        display: inline-block;
        background: #1890ff;
        color: white;
        padding: 8px 16px;
        border-radius: 4px;
        text-decoration: none;
        margin: 10px;
      }

      /* 文件树样式 */
      .folder-tree {
        list-style: none;
      }

      .folder-item {
        cursor: pointer;
        color: #333;
      }

      .folder-header {
        padding: 8px 10px;
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .folder-header:hover {
        background: #f2f2fd;
        color: #817bec;
        border-radius: 4px;
      }

      .folder-item.active > .folder-header {
        background: #f2f2fd;
        color: #817bec;
        border-radius: 4px;
      }

      .folder-content {
        margin-left: 20px;
        display: none;
      }

      .folder-content.expanded {
        display: block;
      }

      .file-item {
        padding: 8px 10px;
        display: flex;
        align-items: center;
        gap: 5px;
        cursor: pointer;
        border-radius: 4px;
      }

      .file-item:hover {
        background: #f2f2fd;
        color: #817bec;
        border-radius: 4px;
      }

      /* 文件选中状态 */
      .file-item.active {
        background: #f2f2fd;
        color: #817bec;
      }

      .folder-icon {
        display: inline-block;
        width: 20px;
        text-align: center;
      }

      /* 右侧内容区域 */
      .main-content {
        flex: 1;
        overflow-y: auto;
        padding-right: 20px;
      }

      /* 视频网格样式 */
      .video-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
        padding: 20px;
      }

      .video-card {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        background: #000;
        aspect-ratio: 16/9;
      }

      .video-thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .video-title {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 8px;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        font-size: 20px;
      }

      /* 文件夹箭头样式 */
      .folder-header {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 8px 10px;
        cursor: pointer;
      }

      .folder-icon {
        display: inline-block;
        width: 16px;
        text-align: center;
        font-size: 10px;
        line-height: 1;
      }

      /* 内容区域切换 */
      .content-section {
        display: none;
        width: 100%;
      }

      .content-section.active {
        display: block;
      }

      .content-section.active2 {
        display: flex;
      }

      /* 智能分镜样式 */
      .smart-shot {
        background-color: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin: 0 20px;
      }

      .input-group {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        gap: 10px;
      }

      .input-group label {
        min-width: 80px;
        color: #666;
      }

      .input-group input[type="text"] {
        flex: 1;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }

      .button-group {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
      }

      .btn {
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      .file-list {
        margin: 20px 0;
        border: 1px solid #ddd;
        border-radius: 4px;
      }

      .file-list table {
        width: 100%;
        border-collapse: collapse;
      }

      .file-list th,
      .file-list td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
      }

      .file-list th {
        background-color: #f8f9fa;
        font-weight: normal;
        color: #666;
      }

      .options-group {
        margin: 20px 0;
      }

      .checkbox-group {
        display: flex;
        gap: 15px;
        margin-top: 8px;
      }

      .slider-group {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .slider {
        flex: 1;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
      }

      .progress-section {
        margin-top: 20px;
      }

      /* 任务进度条样式 */
      .task-progress {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 10px;
      }

      .progress-text {
        color: #666;
        white-space: nowrap;
      }

      .progress-bar {
        flex: 1;
        height: 8px;
        background: #f0f0f0;
        border-radius: 4px;
        overflow: hidden;
      }

      .progress-fill {
        height: 100%;
        background: #1890ff;
        transition: width 0.3s ease;
      }

      .progress-percentage {
        color: #666;
        min-width: 50px;
        text-align: right;
        margin-left: auto;
        /*
	将百分比推到最右边 */
        padding-right: 10px;
      }

      .log-output {
        margin-top: 8px;
        padding: 10px;
        background-color: #f8f9fa;
        border: 1px solid #ddd;
        border-radius: 4px;
        min-height: 100px;
      }

      /* 分镜列表样式 */
      .shot-list {
        flex: 1;
        overflow-x: auto;
      }

      .shot-list table {
        width: 100%;
        border-collapse: collapse;
        background: white;
      }

      .shot-list th,
      .shot-list td {
        padding: 12px;
        text-align: left;
        border: 1px solid #e6e6e6;
      }

      .shot-list th {
        background: #f5f5f5;
        font-weight: normal;
        color: #666;
      }

      .shot-list select {
        padding: 4px 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        width: 100px;
      }

      .delete-btn {
        color: #ff4d4f;
        text-decoration: none;
      }

      .delete-btn:hover {
        color: #ff7875;
      }

      .control-panel {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        margin-top: 20px;
      }

      /* 分镜列表样式 */
      .synthesis-layout {
        display: flex;
        gap: 20px;
        align-items: flex-start;
      }

      /* 操作按钮样式 */
      .action-buttons {
        display: flex;
        gap: 10px;
        margin-top: 20px;
      }

      .action-buttons .btn {
        width: 120px;
        text-align: center;
        background-color: #5048e5;
        color: white;
        border: none;
        padding: 10px 0;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
        margin-bottom: 10px;
      }

      .action-buttons .btn:hover {
        background-color: #665fe8;
      }

      /* 垂直按钮组样式
	*/
      .action-buttons.vertical {
        flex-direction: column;
        gap: 15px;
        margin-top: 0;
        padding: 20px;
      }

      .action-buttons.vertical .btn {
        width: 120px;
        text-align: center;
      }

      /* 分镜列表样式 */
      .shot-name {
        width: 100%;
        padding: 4px 8px;
        border: 1px solid transparent;
        border-radius: 4px;
        background: transparent;
      }

      .shot-name:hover {
        border-color: #d9d9d9;
      }

      .shot-name:focus {
        border-color: #1890ff;
        outline: none;
        background: white;
      }

      .folder-path {
        width: 100%;
        padding: 4px 8px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        background: #f5f5f5;
        cursor: pointer;
      }

      .folder-path:hover {
        border-color: #1890ff;
      }

      /* 视频生成和输出设置样式
	*/
      .synthesis-settings {
        margin-top: 20px;
        border-top: 1px solid #e6e6e6;
        padding-top: 20px;
      }

      .settings-group {
        flex: 1;
        background: #f5f5f5;
        border-radius: 4px;
        padding: 20px;
      }

      .settings-group h3 {
        font-size: 22px;
        color: #666;
        margin-bottom: 20px;
        font-weight: normal;
      }

      .setting-item {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 10px;
      }

      .setting-item label,
      .shot-settings label,
      .import-group label,
      .effect-item label,
      .file-selector label,
      .checkbox-label {
        font-size: 20px;
        color: #666;
        white-space: nowrap;
      }

      .setting-item input[type="text"] {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }

      .setting-item .long-input {
        flex: 1;
      }

      .setting-item .short-input {
        width: 60px;
      }

      .setting-item select {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        min-width: 150px;
      }

      .setting-item .btn-primary {
        padding: 4px 12px;
        background: #5048e5;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      .setting-item .medium-input {
        width: 200px;
      }

      .setting-item .short-select {
        /* 基础布局 */
        width: 180px;
        padding: 8px 12px;
        margin: 0;
        margin-right: 10px;

        /* 视觉设计 */
        border: 1px solid #d1d5db;
        border-radius: 6px;
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        color: #374151;
        font-size: 14px;
        line-height: 1.5;
        cursor: pointer;

        /* 移除原生箭头 */
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;

        /* 自定义箭头（SVG编码） */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px;
      }

      /* 交互状态 */
      .short-select:hover {
        border-color: #9ca3af;
      }
      .short-select:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
      }

      .setting-item input[type="checkbox"] {
        margin: 0 5px 0 10px;
      }

      /* 底部固定设置区域 */
      .bottom-settings {
        position: fixed;
        bottom: 0;
        left: 0px;
        right: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 25px;
        background: white;
        border-top: 1px solid #e6e6e6;
        z-index: 100;
      }

      /* 设置组容器样式 */
      .settings-groups-container {
        display: flex;
        gap: 20px;
      }

      .settings-group {
        flex: 1;
        background: #f5f5f5;
        border-radius: 4px;
        padding: 20px;
      }

      /* 任务日志样式 */
      .task-log {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 10px;
      }

      .log-text {
        color: #666;
        white-space: nowrap;
      }

      .log-link {
        margin-left: 5px;
      }

      .blue-link {
        color: #1890ff;
        text-decoration: none;
      }

      .blue-link:hover {
        text-decoration: underline;
      }

      /* 文本按钮样式 */
      .btn-text {
        background: none;
        border: none;
        color: #1890ff;
        cursor: pointer;
        padding: 0;
        font-size: 14px;
      }

      .btn-text:hover {
        text-decoration: underline;
      }

      /* 列表中的下拉框样式 */
      .shot-list .short-select {
        width: 80px;
        padding: 4px 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }

      /* 导入控件组样式 */
      .import-controls {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .import-controls .btn-text {
        white-space: nowrap;
      }

      .import-controls .short-select {
        min-width: 60px;
      }

      /* 小按钮样式 */
      .btn-small {
        padding: 4px 12px;
        font-size: 14px;
        height: 40px;
        line-height: 24px;
        background: #5048e5;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-right: 10px;
      }

      .btn-small:hover {
        background: #817bec;
      }

      /* 分镜设置样式 */
      .shot-settings {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .shot-settings .setting-group {
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .shot-settings .short-input {
        width: 50px;
        padding: 4px 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }

      .shot-settings .medium-select {
        width: 100px;
        padding: 4px 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }

      .shot-settings .short-select {
        width: 60px;
        padding: 4px 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }

      .shot-settings .blue-link {
        color: #1890ff;
        text-decoration: none;
      }

      .shot-settings .blue-link:hover {
        text-decoration: underline;
      }

      /* 分镜名称输入框样式 */
      .shot-name-input {
        width: 100%;
        padding: 4px 8px;
        border: 1px solid transparent;
        border-radius: 4px;
        background: transparent;
        font-size: 14px;
      }

      .shot-name-input:hover {
        border-color: #d9d9d9;
        background: white;
      }

      .shot-name-input:focus {
        border-color: #1890ff;
        outline: none;
        background: white;
      }

      /* 素材数量组样式 */
      .count-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
        color: #666;
        font-size: 14px;
      }

      /* 专业合成导入控件组样式 */
      .synthesis-pro .import-controls {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .synthesis-pro .import-group {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
      }

      .synthesis-pro .import-group label {
        color: #666;
        white-space: nowrap;
        font-size: 14px;
        min-width: 70px;
      }

      .synthesis-pro .import-controls .btn-small {
        white-space: nowrap;
        min-width: 80px;
      }

      /* 复选框标签样式 */
      .checkbox-label {
        color: #666;
        font-size: 14px;
        cursor: pointer;
        user-select: none;
        margin-left: 5px;
      }

      input[type="checkbox"] {
        cursor: pointer;
      }

      /* 自动混剪页面样式 */
      .auto-synthesis-header {
        margin-bottom: 20px;
      }

      .file-selector {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .file-selector .required::after {
        content: "*";
        color: #ff4d4f;
        margin-left: 4px;
      }

      .auto-synthesis-info {
        background: #f5f5f5;
        border-radius: 4px;
        padding: 15px;
        margin-bottom: 20px;
      }

      .info-group {
        display: flex;
        gap: 20px;
        margin-bottom: 15px;
        color: #666;
        font-size: 16px;
      }

      .auto-synthesis-settings {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
      }

      .radio-group {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
      }

      .checkbox-group {
        margin-top: 10px;
      }

      .effect-settings {
        display: flex;
        gap: 20px;
      }

      .effect-item {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .effect-item label {
        color: #666;
        font-size: 14px;
      }

      /* 分组列表区域样式
	*/
      .group-list-section {
        background: #fff;
        border-radius: 8px;
        margin-bottom: 20px;
      }

      .group-header {
        padding: 20px;
        border-bottom: 1px solid #e6e6e6;
      }

      .material-input {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .material-input .required::after {
        content: "*";
        color: #ff4d4f;
        margin-left: 4px;
      }

      .group-content {
        padding: 20px;
      }

      .group-title {
        margin-bottom: 20px;
        color: #666;
        font-size: 20px;
      }

      .group-table table {
        width: 100%;
        border-collapse: collapse;
      }

      .group-table th,
      .group-table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #e6e6e6;
      }

      .empty-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 0;
        color: #999;
      }

      .empty-placeholder img {
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
      }

      /* 分组列表区域样式 */
      .group-layout {
        display: flex;
        gap: 20px;
      }

      .group-list {
        flex: 1;
        background: #fff;
        border-radius: 8px;
      }

      .group-settings {
        width: 400px;
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .settings-section {
        background: #fff;
        border-radius: 8px;
        padding: 20px;
      }

      .settings-section h3 {
        color: #666;
        font-size: 20px;
        margin-bottom: 20px;
      }

      .setting-group,
      .effect-group {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      .radio-group {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .effect-item {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .effect-item label {
        color: #666;
        font-size: 20px;
        min-width: 120px;
      }

      .blue-link {
        color: #1890ff;
        text-decoration: none;
      }

      .blue-link:hover {
        text-decoration: underline;
      }

      /* 字幕提取输入区域样式 */
      .subtitle-input.full-width {
        width: 100%;
      }

      .subtitle-input.full-width .long-input {
        flex: 1;
        height: 40px;
      }

      .subtitle-input.full-width .short-select {
        height: 40px;
        min-width: 120px;
      }

      .subtitle-input.full-width .btn-primary {
        height: 40px;
        min-width: 100px;
      }

      /* 调整标签样式 */
      .subtitle-input.full-width label {
        font-size: 20px;
        color: #666;
        white-space: nowrap;
      }

      /* 配音页面左右布局 */
      .voice-layout {
        display: flex;
        gap: 40px;
      }

      .voice-left {
        flex: 1;
      }

      .voice-right {
        width: 300px;
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      /* 调整控制器样式 */
      .voice-controls {
        background: #f5f5f5;
        border-radius: 8px;
        padding: 20px;
      }

      .control-group {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 15px;
      }

      .control-group:last-child {
        margin-bottom: 0;
      }

      .voice-slider {
        flex: 1;
        height: 4px;
      }

      /* 生成按钮样式 */
      .btn-generate {
        width: 100%;
        height: 40px;
        font-size: 20px;
        margin: 0;
      }

      .param-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
      }

      .btn-link {
        color: #1890ff;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 20px;
        padding: 0;
        text-decoration: underline;
      }

      .btn-link:hover {
        color: #40a9ff;
      }

      .input-group select.long-input {
        appearance: none;
        background: #fff
          url('data:image/svg+xml;charset=US-ASCII, <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L1 4h10z" fill="%23999" /></svg>')
          no-repeat right 12px center;
        padding-right: 30px;
      }

      .lang-select {
        height: 40px;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 20px;
        min-width: 120px;
        background: #fff;
        cursor: pointer;
      }

      .lang-select:hover {
        border-color: #1890ff;
      }

      .input {
        padding: 5px;
      }

      .normal-shot-name {
        padding: 8px 12px;
      }

      .normal-shot-folder-path-input {
        padding: 8px 12px;
      }

      .advanced-shot-name {
        padding: 8px 12px;
      }

      .short-select-new {
        padding: 5px;
        font-size: 16px;
        margin-right: 10px;
      }

      /* 隐藏原生复选框 */
      .custom-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
      }

      /* 自定义复选框外观 */
      .custom-checkbox .checkmark {
        position: relative;
        display: inline-block;
        width: 18px;
        height: 18px;
        background-color: #fff;
        border: 2px solid #ccc;
        border-radius: 3px;
        margin-right: 8px;
        vertical-align: middle;
        top: -3px;
      }

      /* 选中状态样式 */
      .custom-checkbox input:checked ~ .checkmark {
        background-color: #5048e5;
        border-color: #5048e5;
      }

      /* 勾选图标（使用伪元素） */
      .custom-checkbox .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        left: 3px;
        top: -1px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }

      .custom-checkbox input:checked ~ .checkmark:after {
        display: block;
      }

      /* 隐藏原生单选框 */
      .custom-radio input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
      }

      .custom-radio {
        margin-right: 10px;
      }

      /* 自定义单选框外观 */
      .custom-radio .radio-icon {
        position: relative;
        display: inline-block;
        width: 18px;
        height: 18px;
        border: 2px solid #999;
        border-radius: 50%;
        margin-right: 10px;
        vertical-align: middle;
        transition: all 0.3s ease;
        top: -3px;
      }

      /* 选中状态样式 */
      .custom-radio input:checked ~ .radio-icon {
        border-color: #5048e5;
        background-color: #5048e5;
        box-shadow: inset 0 0 0 3px white; /* 内圆效果 */
      }

      /* 悬浮交互效果 */
      .custom-radio:hover .radio-icon {
        border-color: #555;
      }

      /* 禁用状态 */
      .custom-radio input:disabled ~ .radio-icon {
        background-color: #eee;
        border-color: #ccc;
      }

      .range-container {
        --track-height: 4px;
        --thumb-size: 18px;
        --primary-color: #5048e5;
        --track-fill: linear-gradient(
          90deg,
          var(--primary-color) 0%,
          var(--primary-color) var(--fill-percent, 100%),
          #e3e3e3 var(--fill-percent, 100%),
          #e3e3e3 100%
        );
        position: relative;
        width: 10%;
        padding: 15px 0;
        top: -3px;
        margin-right: 10px;
      }

      .custom-range {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: var(--track-height);
        background: var(--track-fill);
        border-radius: 10px;
        outline: none;
        margin: 0;
        transition: background 0.3s ease;
      }

      /* Webkit/Blink 内核 */
      .custom-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: var(--thumb-size);
        height: var(--thumb-size);
        background: white;
        border: 2px solid var(--primary-color);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s, box-shadow 0.2s;
      }

      /* Firefox 内核 */
      .custom-range::-moz-range-thumb {
        width: var(--thumb-size);
        height: var(--thumb-size);
        background: white;
        border: 2px solid var(--primary-color);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      }

      .number-input-container {
        --primary-color: hsl(210, 90%, 55%);
        --border-color: #ddd;
        --focus-glow: 0 0 0 3px rgba(33, 150, 243, 0.2);
        display: inline-flex;
        align-items: center;
        position: relative;
      }

      .custom-number-input {
        -webkit-appearance: none;
        appearance: none;
        width: 80px;
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 14px;
        line-height: 1.5;
        transition: border-color 0.3s, box-shadow 0.3s;
      }

      /* Firefox 移除箭头 */
      .custom-number-input[type="number"] {
        -moz-appearance: textfield;
      }

      .custom-select {
        /* 基础样式 */
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: white;
        font-size: 14px;
        color: #333;
        cursor: pointer;

        /* 移除默认箭头（可选） */
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;

        /* 添加自定义箭头图标 */
        background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path  d="M7 10l5 5 5-5z"/></svg>');
        background-repeat: no-repeat;
        background-position: right 10px center;
      }

      /* 悬停和焦点状态 */
      .custom-select:hover {
        border-color: #888;
      }
      .custom-select:focus {
        outline: none;
        border-color: #0066ff;
        box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.2);
      }
    </style>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
  </head>

  <body>
    <div class="container">
      <div id="overlay" class="overlay" onclick="closeModal()"></div>

      <div id="modal" class="modal">
        <p id="message">消息弹窗</p>
        <!-- TODO: 调整消息弹窗样式 -->
        <button class="close-btn" onclick="closeModal()">关闭</button>
      </div>

      <!-- 顶部标签导航 -->
      <div class="tab-nav">
        <div class="tab-item active" data-tab="material">素材库</div>
        <div class="tab-item" data-tab="synthesis">视频合成</div>
        <div class="tab-item" data-tab="subtitle">字幕生成</div>
        <div class="tab-item" data-tab="voice">配音生成</div>
        <div class="tab-item" data-tab="content">文案提取</div>
      </div>

      <!-- 内容区域 -->
      <div class="content">
        <!-- 素材库内容 -->
        <div class="tab-content active" id="material">
          <div class="sub-nav">
            <div class="sub-nav-item active">在线素材</div>
            <div class="sub-nav-item">智能分镜</div>
          </div>
          <!-- 在线素材内容 -->
          <div class="content-section online-material active">
            <div class="material-container">
              <!-- 左侧文件树 -->
              <div class="material-sidebar">
                <div class="sidebar-header">
                  <p>
                    <label for="local-video-material"></label>
                    <input
                      class="input"
                      type="text"
                      id="local-video-material"
                      placeholder="请选择视频文件/文件夹"
                      onclick="chooseFolder('local-video-material')"
                      value=""
                    />
                  </p>
                </div>
                <a
                  href="#"
                  class="btn btn-primary"
                  onclick="openFile('local-video-material')"
                  >打开文件夹</a
                >
                <ul class="folder-tree">
                  <li class="folder-item expanded">
                    <div class="folder-header">
                      <span class="folder-icon">⯆</span>
                      <span>📁 aimix</span>
                    </div>
                    <ul class="folder-content expanded">
                      <li class="folder-item expanded active">
                        <div class="folder-header">
                          <span class="folder-icon">⯆</span>
                          <span>📁 effect-video</span>
                        </div>
                        <ul class="folder-content expanded">
                          <li class="file-item">📄 烟火星河.mp4</li>
                          <li class="file-item">📄 烟花光晕.mp4</li>
                          <li class="file-item">📄 星星冲屏.mp4</li>
                          <li class="file-item">📄 绚丽光斑.mp4</li>
                          <li class="file-item">📄 新春烟路.mp4</li>
                          <li class="file-item">📄 心花怒放.mp4</li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>

              <!-- 右侧视频网格 -->
              <div class="main-content">
                <div class="video-grid">
                  <div class="video-card">
                    <img
                      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-aHcHIN1wfO21QEFkfr9atr62KGrnez.png"
                      alt="烟火星河"
                      class="video-thumbnail"
                    />
                    <div class="video-title">烟火星河.mp4</div>
                    <button class="download-btn">下载</button>
                  </div>
                  <div class="video-card">
                    <img
                      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-aHcHIN1wfO21QEFkfr9atr62KGrnez.png"
                      alt="烟火星河"
                      class="video-thumbnail"
                    />
                    <div class="video-title">烟火星河.mp4</div>
                    <button class="download-btn">下载</button>
                  </div>
                  <div class="video-card">
                    <img
                      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-aHcHIN1wfO21QEFkfr9atr62KGrnez.png"
                      alt="烟火星河"
                      class="video-thumbnail"
                    />
                    <div class="video-title">烟火星河.mp4</div>
                    <button class="download-btn">下载</button>
                  </div>
                  <div class="video-card">
                    <img
                      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-aHcHIN1wfO21QEFkfr9atr62KGrnez.png"
                      alt="烟火星河"
                      class="video-thumbnail"
                    />
                    <div class="video-title">烟火星河.mp4</div>
                    <button class="download-btn">下载</button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 智能分镜内容 -->
          <div class="content-section smart-shot">
            <div class="input-group">
              <label>素材目录:</label>
              <label for="clipInput"></label
              ><input
                type="text"
                id="clipInput"
                placeholder="请选择视频文件/文件夹"
                onclick="clipInput('clipInput')"
                value=""
              />
              <span id="clipInputCount">视频数量: 0</span>
            </div>
            <div class="input-group">
              <label>导出目录:</label>
              <label for="clipOutput"></label
              ><input
                type="text"
                onclick="chooseFolder('clipOutput')"
                id="clipOutput"
                placeholder="请选择文件夹"
                value=""
              />
            </div>
            <div class="button-group">
              <button
                class="btn btn-primary"
                id="open-file-btn"
                onclick="openFile('clipOutput')"
              >
                打开文件夹
              </button>
              <button class="btn btn-primary" onclick="start_clip_video()">
                开始分镜任务
              </button>
              <button
                class="btn btn-primary"
                id="stop-split"
                onclick="stop_worker()"
              >
                停止任务
              </button>
            </div>

            <div class="file-list">
              <table>
                <thead>
                  <tr>
                    <td>
                      <label class="custom-checkbox">
                        <input type="checkbox" id="selectAll" />
                        <span class="checkmark"></span>
                        全选
                      </label>
                    </td>
                    <th>序号</th>
                    <th>文件名</th>
                    <th>时长</th>
                    <th>大小</th>
                  </tr>
                </thead>
                <tbody id="shotListBody">
                  <!-- 动态生成的行将被插入这里 -->
                </tbody>
              </table>
            </div>

            <div class="options-group">
              <label>分镜模式:</label>
              <div class="radio-group" id="split-mode-group">
                <label class="custom-radio">
                  <input type="radio" name="split_mode" value="scene" checked />
                  <span class="radio-icon"></span>
                  <label>按场景智能分镜</label>
                </label>
                <label class="custom-radio">
                  <input type="radio" name="split_mode" value="duration" />
                  <span class="radio-icon"></span>
                  <label>按固定分镜时长分镜</label>
                </label>
                <label class="custom-radio">
                  <input type="radio" name="split_mode" value="count" />
                  <span class="radio-icon"></span>
                  <label>按分镜数量分镜</label>
                </label>
                <label class="custom-radio">
                  <input type="radio" name="split_mode" value="voice" />
                  <span class="radio-icon"></span>
                  <label>按口播分镜</label>
                </label>
                <label class="custom-radio">
                  <input type="radio" name="split_mode" value="emotion" />
                  <span class="radio-icon"></span>
                  <label>AI精准转场分镜</label>
                </label>
              </div>
            </div>

            <div class="options-group">
              <label>参数设置:</label>
              <div id="param-setting"></div>
            </div>
            <div class="options-group">
              <label>文件输出:</label>
              <div class="radio-group">
                <label class="custom-radio">
                  <input
                    type="radio"
                    name="split_save_mode"
                    value="true"
                    checked
                  />
                  <span class="radio-icon"></span>
                  <label>分目录保存</label>
                </label>
                <label class="custom-radio">
                  <input type="radio" name="split_save_mode" value="false" />
                  <span class="radio-icon"></span>
                  <label>同目录保存</label>
                </label>
              </div>
            </div>
          </div>
        </div>

        <!-- 视频合成内容 -->
        <div class="tab-content" id="synthesis">
          <!-- 二级导航 -->
          <div class="sub-nav">
            <div class="sub-nav-item active">基础合成</div>
            <div class="sub-nav-item">高级合成</div>
            <div class="sub-nav-item">专业合成</div>
            <div class="sub-nav-item">自动混剪</div>
            <div class="sub-nav-item">分组合成</div>
          </div>

          <!-- 合成内容区域 -->
          <div class="synthesis-content">
            <!-- 基础合成 -->
            <div class="content-section synthesis-basic active">
              <div class="synthesis-container">
                <div class="synthesis-layout">
                  <div class="shot-list">
                    <table>
                      <thead>
                        <tr>
                          <th>分镜顺序</th>
                          <th>分镜名称</th>
                          <th>分镜目录</th>
                          <th>素材数量</th>
                          <th>选取规则</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody id="shotListBody-synthesis">
                        <!-- 动态生成的行将被插入这里 -->
                      </tbody>
                    </table>
                  </div>
                  <div class="action-buttons vertical">
                    <button class="btn btn-primary" onclick="AddShot('normal')">
                      新增分镜
                    </button>
                    <button
                      class="btn btn-primary"
                      onclick="refresh_table('normal')"
                    >
                      刷新素材
                    </button>
                    <button
                      class="btn btn-primary"
                      onclick="ClearShot('normal')"
                    >
                      清空分镜
                    </button>
                    <button
                      class="btn btn-primary"
                      onclick="start_normal_synthesis()"
                    >
                      开始合成
                    </button>
                    <button class="btn btn-primary" onclick="stop_worker()">
                      停止合成
                    </button>
                  </div>
                </div>
                <!-- 底部固定设置区域 -->
                <div class="bottom-settings">
                  <!-- 设置组容器 -->
                  <div class="settings-groups-container">
                    <!-- 视频生成设置 -->
                    <div class="settings-group video-settings">
                      <h3>视频生成设置</h3>
                      <div class="setting-item">
                        <label>生成数量(1-10):</label>
                        <label style="margin-right: 10px">
                          <div class="number-input-container">
                            <input
                              type="number"
                              step="1"
                              min="1"
                              max="10"
                              value="1"
                              class="custom-number-input"
                              id="normal-generate-count"
                            />
                          </div>
                        </label>
                        <label class="custom-checkbox">
                          <input type="checkbox" id="normal-by-audio" />
                          <span class="checkmark"></span>
                          配音:
                        </label>
                        <label style="margin-right: 10px">
                          <input
                            type="text"
                            placeholder="请选择音频文件，模拟配音"
                            class="long-input"
                            readonly
                            id="normal-audio-input"
                            onclick="chooseFile('normal-audio-input', 'mp3')"
                          />
                        </label>
                        <label
                          class="custom-checkbox"
                          style="margin-right: 10px"
                        >
                          <input type="checkbox" id="normal-keep-audio" />
                          <span class="checkmark"></span>
                          保留素材音频
                        </label>
                        <label class="custom-checkbox">
                          <input type="checkbox" id="normal-auto-match-audio" />
                          <span class="checkmark"></span>
                          自动匹配音频
                        </label>
                      </div>
                      <div class="setting-item">
                        <label class="custom-checkbox">
                          <input type="checkbox" id="normal-by-subtitle" />
                          <span class="checkmark"></span>
                          启用字幕:
                        </label>
                        <label style="margin-right: 10px">
                          <input
                            type="text"
                            placeholder="请选择字幕文件*.srt"
                            class="long-input"
                            readonly
                            id="normal-subtitle-input"
                            onclick="chooseFile('normal-subtitle-input','srt')"
                          />
                        </label>
                        <label>分镜时长(s):</label>
                        <label style="margin-right: 10px">
                          <div class="number-input-container">
                            <input
                              type="number"
                              id="normal-duration-input"
                              value="0"
                              class="custom-number-input"
                            />
                          </div>
                        </label>
                        <label>倍速:</label>
                        <label style="margin-right: 10px">
                          <div class="number-input-container">
                            <input
                              type="number"
                              id="normal-speed-input"
                              step="0.01"
                              value="1.0"
                              min="0.5"
                              class="custom-number-input"
                            />
                          </div>
                        </label>
                        <button class="btn-primary">高级设置</button>
                        <!-- TODO: 实现设置弹窗 -->
                      </div>
                    </div>
                    <!-- 视频输出设置 -->
                    <div class="settings-group output-settings">
                      <h3>视频输出设置</h3>
                      <div class="setting-item">
                        <label>导出目录:</label>
                        <label for="normal-output-dir"></label
                        ><input
                          type="text"
                          id="normal-output-dir"
                          value=""
                          onclick="chooseFolder('normal-output-dir')"
                          class="long-input"
                        />
                        <button
                          style="margin-left: 10px"
                          class="btn-primary"
                          onclick=""
                        >
                          打开
                        </button>
                      </div>
                      <div class="setting-item">
                        <label>分辨率:</label>
                        <label for="normal-resolution-select"></label>
                        <select
                          class="short-select"
                          id="normal-resolution-select"
                        >
                          <option value="[720, 1280]">720x1280</option>
                          <option value="[1080, 1920]">1080x1920</option>
                          <option value="[1280, 720]">1280x720</option>
                          <option value="[1920, 1080]">1920x1080</option>
                        </select>

                        <label>
                          <select class="short-select">
                            <option>默认</option>
                            <option>拉伸</option>
                            <option>等比例缩放</option>
                          </select>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 高级合成 -->
            <div class="content-section synthesis-advanced">
              <div class="synthesis-container">
                <div class="synthesis-layout">
                  <div class="shot-list">
                    <table>
                      <thead>
                        <tr>
                          <th>分镜名称</th>
                          <th>素材数量</th>
                          <th>导入分镜素材</th>
                          <th>分镜设置</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody id="shotListBody-advanced">
                        <!-- 动态生成的行将被插入这里 -->
                      </tbody>
                    </table>
                  </div>
                  <div class="action-buttons vertical">
                    <button
                      class="btn btn-primary"
                      onclick="AddShot('advanced')"
                    >
                      新增分镜
                    </button>
                    <button
                      class="btn btn-primary"
                      onclick="ClearShot('advanced')"
                    >
                      清空分镜
                    </button>
                    <!--      TODO: 待实现保存脚本         <button class="btn btn-primary">保存脚本</button>-->
                    <button
                      class="btn btn-primary"
                      onclick="start_advanced_synthesis()"
                    >
                      开始合成
                    </button>
                    <button class="btn btn-primary" onclick="stop_worker()">
                      停止合成
                    </button>
                  </div>
                </div>
                <!-- 底部固定设置区域 -->
                <div class="bottom-settings">
                  <!-- 设置组容器 -->
                  <div class="settings-groups-container">
                    <!-- 视频生成设置 -->
                    <div class="settings-group video-settings">
                      <h3>视频生成设置</h3>
                      <div class="setting-item">
                        <label>生成数量(1-10):</label>
                        <label style="margin-right: 10px">
                          <div class="number-input-container">
                            <input
                              type="number"
                              step="1"
                              min="1"
                              max="10"
                              value="1"
                              class="custom-number-input"
                              id="advanced-generate-count"
                            />
                          </div>
                        </label>
                        <label class="custom-checkbox">
                          <input type="checkbox" id="advanced-by-audio" />
                          <span class="checkmark"></span>
                          配音:
                        </label>
                        <label style="margin-right: 10px">
                          <input
                            type="text"
                            placeholder="请选择音频文件夹"
                            class="long-input"
                            readonly
                            id="advanced-audio-input"
                            onclick="chooseFolder('advanced-audio-input')"
                          />
                        </label>
                        <label>
                          <select
                            class="short-select"
                            id="advanced-audio-input-rule"
                          >
                            <option value="随机">随机</option>
                            <option value="去重">去重</option>
                          </select>
                        </label>
                      </div>
                      <div class="setting-item">
                        <label class="custom-checkbox">
                          <input type="checkbox" id="advanced-by-subtitle" />
                          <span class="checkmark"></span>
                          启用字幕:
                        </label>
                        <label style="margin-right: 10px">
                          <input
                            type="text"
                            placeholder="请选择字幕文件夹"
                            class="long-input"
                            readonly
                            id="advanced-subtitle-input"
                            onclick="chooseFolder('advanced-subtitle-input')"
                          />
                        </label>
                        <label>
                          <select
                            class="short-select"
                            id="advanced-subtitle-input-rule"
                          >
                            <option value="随机">随机</option>
                            <option value="去重">去重</option>
                          </select>
                        </label>
                        <label
                          class="custom-checkbox"
                          style="margin-right: 10px"
                        >
                          <input type="checkbox" id="advanced-keep-audio" />
                          <span class="checkmark"></span>
                          保留素材音频
                        </label>
                        <label
                          class="custom-checkbox"
                          style="margin-right: 10px"
                        >
                          <input
                            type="checkbox"
                            id="advanced-auto-match-audio"
                          />
                          <span class="checkmark"></span>
                          自动匹配音频
                        </label>
                        <label
                          class="custom-checkbox"
                          style="margin-right: 10px"
                        >
                          <input type="checkbox" id="advanced-video-priority" />
                          <span class="checkmark"></span>
                          视频循环
                        </label>
                      </div>
                      <div class="setting-item">
                        <label>分镜时长(s):</label>
                        <label style="margin-right: 10px">
                          <div class="number-input-container">
                            <input
                              type="number"
                              step="1"
                              value="0"
                              class="custom-number-input"
                              id="advanced-duration-input"
                            />
                          </div>
                        </label>
                        <label>倍速:</label>
                        <label style="margin-right: 10px">
                          <div class="number-input-container">
                            <input
                              type="number"
                              step="0.01"
                              value="1.0"
                              min="0.5"
                              class="custom-number-input"
                              id="advanced-speed-input"
                            />
                          </div>
                        </label>
                        <button
                          class="btn-primary btn-small"
                          onclick="advanced_settings()"
                        >
                          高级设置
                        </button>
                      </div>
                    </div>
                    <!-- 视频输出设置 -->
                    <div class="settings-group output-settings">
                      <h3>视频输出设置</h3>
                      <div class="setting-item">
                        <label>导出目录:</label>
                        <label for="advanced-output-dir"></label
                        ><input
                          type="text"
                          id="advanced-output-dir"
                          value=""
                          onclick="chooseFolder('advanced-output-dir')"
                          class="long-input"
                          style="margin-right: 10px"
                        />
                        <button class="btn-primary" onclick="">打开</button>
                      </div>
                      <div class="setting-item">
                        <label>分辨率:</label>
                        <label for="advanced-resolution-select"></label>
                        <select
                          class="short-select"
                          id="advanced-resolution-select"
                        >
                          <option value="[720, 1280]">720x1280</option>
                          <option value="[1080, 1920]">1080x1920</option>
                          <option value="[1280, 720]">1280x720</option>
                          <option value="[1920, 1080]">1920x1080</option>
                        </select>

                        <label>
                          <select>
                            <option>默认</option>
                            <option>拉伸</option>
                            <option>等比例缩放</option>
                          </select>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 专业合成 -->
            <div class="content-section synthesis-pro">
              <div class="synthesis-container">
                <div class="synthesis-layout">
                  <div class="shot-list">
                    <table>
                      <thead>
                        <tr>
                          <th>分镜名称</th>
                          <th>素材数量</th>
                          <th>导入分镜素材</th>
                          <th>镜像</th>
                          <th>滤镜</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody id="shotListBody-pro"></tbody>
                    </table>
                  </div>
                  <div class="action-buttons vertical">
                    <button class="btn btn-primary" onclick="AddShot('pro')">
                      新增分镜
                    </button>
                    <!--     TODO                       <button class="btn btn-primary">创建素材目录</button>-->
                    <!--     TODO                       <button class="btn btn-primary">保存脚本</button>-->
                    <button class="btn btn-primary" onclick="ClearShot('pro')">
                      清空分镜
                    </button>
                    <button
                      class="btn btn-primary"
                      onclick="start_pro_synthesis()"
                    >
                      开始合成
                    </button>
                    <button class="btn btn-primary" onclick="stop_worker()">
                      停止合成
                    </button>
                  </div>
                </div>
                <!-- 底部固定设置区域 -->
                <div class="bottom-settings">
                  <!-- 设置组容器 -->
                  <div class="settings-groups-container">
                    <!-- 视频生成设置 -->
                    <div class="settings-group video-settings">
                      <h3>视频生成设置</h3>
                      <div class="setting-item">
                        <label>生成数量(1-10):</label>
                        <label style="margin-right: 10px">
                          <div class="number-input-container">
                            <input
                              type="number"
                              step="1"
                              min="1"
                              max="10"
                              value="1"
                              class="custom-number-input"
                              id="pro-generate-count"
                            />
                          </div>
                        </label>
                      </div>
                      <div class="setting-item">
                        <label class="custom-checkbox">
                          <input type="checkbox" id="pro-by-subtitle" />
                          <span class="checkmark"></span>
                          字幕目录:
                        </label>
                        <label style="margin-right: 10px">
                          <input
                            type="text"
                            placeholder="支持多个字幕，请选择..."
                            class="long-input"
                            id="pro-subtitle-input"
                            onclick="chooseFolder('pro-subtitle-input')"
                          />
                        </label>
                        <label>
                          <select class="short-select">
                            <option>随机</option>
                            <option>去重</option>
                          </select>
                        </label>
                      </div>
                      <div class="setting-item">
                        <label class="custom-checkbox">
                          <input type="checkbox" id="pro-keep-audio" />
                          <span class="checkmark"></span>
                          保留素材音频
                        </label>
                      </div>
                      <div class="setting-item">
                        <label>倍速:</label>
                        <label style="margin-right: 10px">
                          <div class="number-input-container">
                            <input
                              type="number"
                              step="0.01"
                              value="1.0"
                              min="0.5"
                              class="custom-number-input"
                              id="pro-speed-input"
                            />
                          </div>
                        </label>
                        <button
                          class="btn-primary btn-small"
                          onclick="advanced_settings()"
                        >
                          高级设置
                        </button>
                        <!-- TODO: 实现设置弹窗 -->
                      </div>
                    </div>
                    <!-- 视频输出设置 -->
                    <div class="settings-group output-settings">
                      <h3>视频输出设置</h3>
                      <div class="setting-item">
                        <label>导出目录:</label>
                        <label for="pro-output-dir"></label
                        ><input
                          type="text"
                          id="pro-output-dir"
                          value=""
                          onclick="chooseFolder('pro-output-dir')"
                          class="long-input"
                        />
                        <button
                          style="margin-left: 10px"
                          class="btn-primary"
                          onclick=""
                        >
                          打开
                        </button>
                      </div>
                      <div class="setting-item">
                        <label>分辨率:</label>
                        <label for="pro-resolution-select"></label>
                        <select class="short-select" id="pro-resolution-select">
                          <option value="[720, 1280]">720x1280</option>
                          <option value="[1080, 1920]">1080x1920</option>
                          <option value="[1280, 720]">1280x720</option>
                          <option value="[1920, 1080]">1920x1080</option>
                        </select>
                        <label>
                          <select>
                            <option>默认</option>
                            <option>拉伸</option>
                            <option>等比例缩放</option>
                          </select>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 自动混剪 -->
            <div class="content-section synthesis-auto">
              <div class="synthesis-container">
                <div class="auto-synthesis-header">
                  <div class="file-selector">
                    <label class="required">分镜文件夹:</label>
                    <label>
                      <input
                        style="padding: 8px 12px; margin-right: 10px"
                        type="text"
                        placeholder="请选择分镜文件夹"
                        class="long-input"
                        id="auto-mix-folder-input"
                        value=""
                        onclick="auto_mix_folder_input('auto-mix-folder-input')"
                      />
                    </label>
                    <label>
                      <select class="short-select-new" id="auto-select-rule">
                        <option value="random">随机</option>
                        <option value="unique">去重</option>
                      </select>
                    </label>
                    <button
                      class="btn-primary"
                      style="margin-right: 10px"
                      onclick="start_auto_synthesis()"
                    >
                      开始混剪
                    </button>
                    <button class="btn-primary" onclick="stop_synthesis()">
                      取消任务
                    </button>
                  </div>
                </div>
                <div class="auto-synthesis-info">
                  <label>文件夹内容</label>
                  <div class="info-group">
                    <div class="info-item">文件夹内容</div>
                    <div class="info-item" id="auto-mix-video-count">
                      视频数量:
                    </div>
                    <div class="info-item" id="auto-mix-video-max">
                      最长视频: 0秒
                    </div>
                    <div class="info-item" id="auto-mix-video-min">
                      最短视频: 0秒
                    </div>
                    <div class="info-item" id="auto-mix-video-total">
                      素材总时长: 0秒
                    </div>
                  </div>
                  <div class="auto-synthesis-settings">
                    <label>自动混剪设置</label>
                    <div class="setting-group">
                      <div class="radio-group">
                        <label class="custom-radio">
                          <input type="radio" name="autoSetting" checked />
                          <span class="radio-icon"></span>
                        </label>
                        <label for="autoShotCount">分镜数量:</label>
                        <label style="margin-right: 10px">
                          <div class="number-input-container">
                            <input
                              type="number"
                              min="2"
                              step="1"
                              id="autoShotCount"
                              value="2"
                              class="custom-number-input"
                            />
                          </div>
                        </label>
                      </div>
                      <div class="radio-group">
                        <label class="custom-radio">
                          <input type="radio" name="autoSetting" />
                          <span class="radio-icon"></span>
                        </label>
                        <label for="autoShotDuration">视频时长(秒):</label>
                        <label style="margin-right: 10px">
                          <div class="number-input-container">
                            <input
                              type="number"
                              step="0.1"
                              value="1"
                              id="autoShotDuration"
                              class="custom-number-input"
                            />
                          </div>
                        </label>
                      </div>
                      <div class="radio-group">
                        <label class="custom-radio">
                          <input
                            type="radio"
                            name="autoSetting"
                            id="matchAudioDuration"
                          />
                          <span class="radio-icon"></span>
                        </label>
                        <label for="matchAudioDuration">匹配配音时长</label>
                      </div>
                    </div>
                    <div class="effect-settings">
                      <label style="margin-right: 10px;">分镜效果设置</label>
                      <div class="effect-item">
                        <label>转场:</label>
                        <a href="#" class="blue-link">无</a>
                      </div>
                      <div class="effect-item">
                        <label>转场时长(秒):</label>
                        <label>
                          <input
                            style='padding: 8px 12px;margin-right: 10px;'
                            type="text"
                            value="0.2"
                            id="translateDuration"
                            class="short-input"
                          />
                        </label>
                      </div>
                      <div class="effect-item">
                        <label>滤镜:</label>
                        <a href="#" class="blue-link">无</a>
                      </div>
                      <div class="effect-item">
                        <label>翻转:</label>
                        <label>
                          <select class="short-select-new">
                            <option>无</option>
                            <option>水平</option>
                            <option>垂直</option>
                          </select>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 底部固定设置区域 -->
                <div class="bottom-settings">
                  <!-- 设置组容器 -->
                  <div class="settings-groups-container">
                    <!-- 视频生成设置 -->
                    <div class="settings-group video-settings">
                      <h3>视频生成设置</h3>
                      <div class="setting-item">
                        <label>生成数量(1-10):</label>
                        <label style="margin-right: 10px">
                          <div class="number-input-container">
                            <input
                              type="number"
                              step="1"
                              min="1"
                              max="10"
                              value="1"
                              class="custom-number-input"
                              id="auto-generate-count"
                            />
                          </div>
                        </label>
                      </div>
                      <div class="setting-item">
                        <label class="custom-checkbox">
                          <input type="checkbox" id="auto-by-audio" />
                          <span class="checkmark"></span>
                          配音:
                        </label>
                        <label>
                          <input
                            style="margin-right: 10px;"
                            type="text"
                            placeholder="请选择音频文件，模拟配音"
                            class="long-input"
                            readonly
                            id="auto-audio-input"
                            onclick="chooseFolder('auto-audio-input')"
                          />
                        </label>
                        <label>
                          <select
                            class="short-select"
                            id="auto-audio-input-rule"
                          >
                            <option value="随机">随机</option>
                            <option value="去重">去重</option>
                          </select>
                        </label>
                      </div>
                      <div class="setting-item">
                        <label class="custom-checkbox">
                          <input type="checkbox" id="auto-by-subtitle" />
                          <span class="checkmark"></span>
                          启用字幕:
                        </label>
                        <label>
                          <input
                            style='margin-right: 10px;'
                            type="text"
                            placeholder="请选择字幕文件夹"
                            class="long-input"
                            readonly
                            id="auto-subtitle-input"
                            onclick="chooseFolder('auto-subtitle-input')"
                          />
                        </label>
                        <label>
                          <select
                            class="short-select"
                            id="auto-subtitle-input-rule"
                          >
                            <option value="随机">随机</option>
                            <option value="去重">去重</option>
                          </select>
                        </label>
                      </div>
                      <div class="setting-item">
                        <label class="custom-checkbox">
                          <input type="checkbox" id="auto-keep-audio" />
                          <span class="checkmark"></span>
                          保留素材音频
                        </label>
                      </div>
                      <div class="setting-item">
                         <label class="custom-checkbox">
                          <input type="checkbox" id="auto-auto-match-audio" />
                          <span class="checkmark"></span>
                          自动匹配音频
                        </label>
                      </div>
                      <div class="setting-item">
                        <label>倍速:</label>
                        <label style="margin-right: 10px">
                          <div class="number-input-container">
                            <input
                              type="number"
                              step="0.01"
                              value="1.0"
                              min="0.5"
                              class="custom-number-input"
                              id="auto-speed-input"
                            />
                          </div>
                        </label>
                        <label>排除</label>
                        <label style="margin-right: 10px">
                          <div class="number-input-container">
                            <input
                              type="number"
                              step="1"
                              value="1"
                              min="0"
                              class="custom-number-input"
                              id="auto-exclude-input"
                            />
                          </div>
                        </label>
                        <label style="margin-right: 10px;">秒的分镜</label>
                        <button
                          class="btn-primary btn-small"
                          onclick="advanced_settings()"
                        >
                          高级设置
                        </button>
                        <!-- TODO: 实现设置弹窗 -->
                      </div>
                    </div>
                    <!-- 视频输出设置 -->
                    <div class="settings-group output-settings">
                      <h3>视频输出设置</h3>
                      <div class="setting-item">
                        <label>导出目录:</label>
                        <label for="auto-output-dir"></label
                        ><input
                          type="text"
                          id="auto-output-dir"
                          value=""
                          onclick="chooseFolder('auto-output-dir')"
                          class="long-input"
                        />
                        <button style='margin-left: 10px;' class="btn-primary" onclick="">打开</button>
                      </div>
                      <div class="setting-item">
                        <label>分辨率:</label>
                        <label for="auto-resolution-select"></label>
                        <select
                          class="short-select"
                          id="auto-resolution-select"
                        >
                          <option value="[720, 1280]">720x1280</option>
                          <option value="[1080, 1920]">1080x1920</option>
                          <option value="[1280, 720]">1280x720</option>
                          <option value="[1920, 1080]">1920x1080</option>
                        </select>
                        <label>
                          <select>
                            <option>默认</option>
                            <option>拉伸</option>
                            <option>等比例缩放</option>
                          </select>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- TODO: 实现 分组合成 -->
            <!--                    <div class="content-section synthesis-group">-->
            <!--                        <div class="synthesis-container">-->
            <!--                            &lt;!&ndash; 分组列表区域 &ndash;&gt;-->
            <!--                            <div class="group-list-section">-->
            <!--                                <div class="group-layout">-->
            <!--                                    &lt;!&ndash; 左侧分组列表 &ndash;&gt;-->
            <!--                                    <div class="group-list">-->
            <!--                                        <div class="group-header">-->
            <!--                                            <div class="material-input">-->
            <!--                                                <label class="required">素材文件夹:</label>-->
            <!--                                                <input type="text" placeholder="请选择场景文件夹" class="long-input">-->
            <!--                                                <button class="btn-primary">导入素材</button>-->
            <!--                                                <button class="btn-primary">开始混剪</button>-->
            <!--                                                <button class="btn-primary">取消任务</button>-->
            <!--                                            </div>-->
            <!--                                        </div>-->
            <!--                                        <div class="group-content">-->
            <!--                                            <div class="group-title">-->
            <!--                                                分组列表: (总导入分组数: 0, 已过滤空文件夹)-->
            <!--                                            </div>-->
            <!--                                            <div class="group-table">-->
            <!--                                                <table>-->
            <!--                                                    <thead>-->
            <!--                                                    <tr>-->
            <!--                                                        <th>分组名</th>-->
            <!--                                                        <th>分镜(素材)数量</th>-->
            <!--                                                    </tr>-->
            <!--                                                    </thead>-->
            <!--                                                    <tbody>-->
            <!--                                                    <tr class="empty-data">-->
            <!--                                                        <td colspan="2">-->
            <!--                                                            <div class="empty-placeholder">-->
            <!--                                                                <img src="../../assets/images/empty.png" alt="暂无数据">-->
            <!--                                                                <span>暂无数据</span>-->
            <!--                                                            </div>-->
            <!--                                                        </td>-->
            <!--                                                    </tr>-->
            <!--                                                    </tbody>-->
            <!--                                                </table>-->
            <!--                                            </div>-->
            <!--                                        </div>-->
            <!--                                    </div>-->
            <!--                                    &lt;!&ndash; 右侧设置区域 &ndash;&gt;-->
            <!--                                    <div class="group-settings">-->
            <!--                                        <div class="settings-section">-->
            <!--                                            <h3>自动混剪设置</h3>-->
            <!--                                            <div class="setting-group">-->
            <!--                                                <div class="radio-group">-->
            <!--                                                    <input type="radio" id="groupShotDuration" name="groupSetting" checked>-->
            <!--                                                    <label for="groupShotDuration">分镜时长(秒):</label>-->
            <!--                                                    <input type="text" value="0" class="short-input">-->
            <!--                                                </div>-->
            <!--                                            </div>-->
            <!--                                        </div>-->
            <!--                                        <div class="settings-section">-->
            <!--                                            <h3>场景效果设置</h3>-->
            <!--                                            <div class="effect-group">-->
            <!--                                                <div class="effect-item">-->
            <!--                                                    <label>转场:</label>-->
            <!--                                                    <a href="#" class="blue-link">无</a>-->
            <!--                                                </div>-->
            <!--                                                <div class="effect-item">-->
            <!--                                                    <label>转场时长(秒):</label>-->
            <!--                                                    <input type="text" value="0.2" class="short-input">-->
            <!--                                                </div>-->
            <!--                                                <div class="effect-item">-->
            <!--                                                    <label>滤镜:</label>-->
            <!--                                                    <a href="#" class="blue-link">无</a>-->
            <!--                                                </div>-->
            <!--                                                <div class="effect-item">-->
            <!--                                                    <label>翻转:</label>-->
            <!--                                                    <select class="short-select">-->
            <!--                                                        <option>无</option>-->
            <!--                                                    </select>-->
            <!--                                                </div>-->
            <!--                                            </div>-->
            <!--                                        </div>-->
            <!--                                    </div>-->
            <!--                                </div>-->
            <!--                            </div>-->
            <!--                            &lt;!&ndash; 底部固定设置区域 &ndash;&gt;-->
            <!--                            <div class="bottom-settings">-->
            <!--                                &lt;!&ndash; 设置组容器 &ndash;&gt;-->
            <!--                                <div class="settings-groups-container">-->
            <!--                                    &lt;!&ndash; 视频生成设置 &ndash;&gt;-->
            <!--                                    <div class="settings-group video-settings">-->
            <!--                                        <h3>视频生成设置</h3>-->
            <!--                                        <div class="setting-item">-->
            <!--                                            <label>生成数量(1-5):</label>-->
            <!--                                            <input type="text" value="1" class="short-input">-->
            <!--                                        </div>-->
            <!--                                        <div class="setting-item">-->
            <!--                                            <label>配音目录(支持多个):</label>-->
            <!--                                            <input type="text" placeholder="请选择配音目录，支持多个配音文件，提取配音"-->
            <!--                                                   class="long-input">-->
            <!--                                            <select class="short-select">-->
            <!--                                                <option>随机</option>-->
            <!--                                            </select>-->
            <!--                                        </div>-->
            <!--                                        <div class="setting-item">-->
            <!--                                            <label>字幕目录:</label>-->
            <!--                                            <input type="text" placeholder="支持多个字幕，请选择..." class="medium-input">-->
            <!--                                            <select class="short-select">-->
            <!--                                                <option>随机</option>-->
            <!--                                            </select>-->
            <!--                                        </div>-->
            <!--                                        <div class="setting-item">-->
            <!--                                            <input type="checkbox" id="keepAudioGroupCheck">-->
            <!--                                            <label for="keepAudioGroupCheck" class="checkbox-label">保留素材音频</label>-->
            <!--                                        </div>-->
            <!--                                        <div class="setting-item">-->
            <!--                                            <input type="checkbox" id="groupMatchAudioVideo">-->
            <!--                                            <label for="groupMatchAudioVideo"-->
            <!--                                                   class="checkbox-label">自动匹配音频/视频</label>-->
            <!--                                        </div>-->
            <!--                                        <div class="setting-item">-->
            <!--                                            <label>倍速:</label>-->
            <!--                                            <input type="text" value="1.0" class="short-input">-->
            <!--                                            <label>排除<</label>-->
            <!--                                            <input type="text" value="8" class="short-input">-->
            <!--                                            <label>秒的分镜</label>-->
            <!--                                            <button class="btn-primary btn-small">高级设置</button> &lt;!&ndash; TODO: 实现设置弹窗 &ndash;&gt;-->
            <!--                                        </div>-->
            <!--                                    </div>-->
            <!--                                    &lt;!&ndash; 视频输出设置 &ndash;&gt;-->
            <!--                                    <div class="settings-group output-settings">-->
            <!--                                        <h3>视频输出设置</h3>-->
            <!--                                        <div class="setting-item">-->
            <!--                                            <label>导出目录:</label>-->
            <!--                                            <input type="text" value="C:\Users\Administrator\Downloads\aimix_save"-->
            <!--                                                   class="long-input">-->
            <!--                                            <button class="btn-primary">打开</button>-->
            <!--                                        </div>-->
            <!--                                        <div class="setting-item">-->
            <!--                                            <label>分辨率:</label>-->
            <!--                                            <select>-->
            <!--                                                <option>变形 720x1280 合成块</option>-->
            <!--                                            </select>-->
            <!--                                            <select>-->
            <!--                                                <option>请清全屏，默认</option>-->
            <!--                                            </select>-->
            <!--                                        </div>-->
            <!--                                    </div>-->
            <!--                                </div>-->
            <!--                                &lt;!&ndash; 任务进度条 &ndash;&gt;-->
            <!--                                <div class="task-progress">-->
            <!--                                    <div class="progress-text">任务进度:</div>-->
            <!--                                    <div class="progress-bar">-->
            <!--                                        <div class="progress-fill" style="width: 0%"></div>-->
            <!--                                    </div>-->
            <!--                                    <div class="progress-percentage">0%</div>-->
            <!--                                </div>-->
            <!--                            </div>-->
            <!--                        </div>-->
            <!--                    </div>-->
          </div>
        </div>

        <!-- 字幕生成内容 -->
        <div class="tab-content" id="subtitle">
          <div class="task-duration">从音视频文件提取字幕信息</div>
          <div class="subtitle-container">
            <div class="subtitle-header">
              <div class="subtitle-input-file full-width">
                <label>字幕提取(选择音视频文件):</label>
                <label>
                  <input
                    style="padding: 8px 12px;"
                    type="text"
                    placeholder="请选择字幕文件"
                    id="single-subtitle-input"
                    readonly
                    onclick="chooseSingleIdentAudioFile('single-subtitle-input')"
                    class="long-input"
                  />
                </label>
                <label id="single-subtitle-input-duration">时长: 0分钟</label>
                <button class="btn-primary" onclick="extract_subtitle()">
                  提取字幕
                </button>
              </div>
            </div>
            <div class="subtitle-table">
              <div class="subtitle-title">编辑字幕</div>
              <table>
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>内容</th>
                  </tr>
                </thead>
                <tbody class="subtitle-tbody" id="subtitle-tbody"></tbody>
              </table>
            </div>
            <div class="subtitle-footer">
              <button class="btn-primary" onclick="save_subtitle()">
                保存字幕
              </button>
            </div>
          </div>
        </div>

        <!-- 配音生成内容 -->
        <div class="tab-content" id="voice">
          <div class="voice-container">
            <div class="voice-content">
              <div class="voice-header">
                <div class="voice-input">
                  <label>文案: (当前会员权益最多支持200字/次)</label>
                  <textarea
                    placeholder="请输入需要配音的文案"
                    class="voice-textarea"
                    id="synthesis-voice-input"
                  ></textarea>
                  <div class="word-count">0 / 200</div>
                  <!-- TODO: 限制字数/动态改变文字数 -->
                </div>
              </div>
              <div class="voice-options">
                <div class="voice-layout">
                  <!-- 左侧语言选择区域 -->
                  <div class="voice-left">
                    <div class="option-group">
                      <label>选择语言:</label>
                      <label
                        ><input
                          style='padding: 8px 12px;'
                          type="text"
                          readonly
                          id="synthesis-audio-save-path"
                          placeholder="选择保存目录"
                          value=""
                          onclick="chooseFolder('synthesis-audio-save-path')"
                      /></label>
                    </div>
                    <div class="voice-grid"></div>
                  </div>
                  <!-- 右侧控制区域 -->
                  <div class="voice-right">
                    <div class="voice-controls">
                      <div class="control-group">
                        <label>语速:</label>
                        <div class="range-container" style="width: 50%;">
                        <input
                          type="range"
                          id="voice-speed-slider"
                          min="0.5"
                          max="2.0"
                          value="1.0"
                          step="0.1"
                          class="custom-range"
                        >
                        </div>
                        <span id="voice-speed-slider-value">1.0</span>
                      </div>
                      <div class="control-group">
                        <label>语调:</label>
                        <div class="range-container" style="width: 50%;">
                        <input
                          type="range"
                          id="voice-pitch-slider"
                          min="0.5"
                          max="2.0"
                          value="1.0"
                          step="0.1"
                          class="custom-range"
                        >
                        </div>
                        <span id="voice-pitch-slider-value">1.0</span>
                      </div>
                      <div class="control-group">
                        <label>音量:</label>
                        <div class="range-container" style="width: 50%;">
                        <input
                          type="range"
                          id="voice-volume-slider"
                          min="0"
                          max="100"
                          value="100"
                          class="custom-range"
                        >
                        </div>
                        <span id="voice-volume-slider-value">100</span>
                      </div>
                    </div>
                    <button
                      class="btn-primary btn-generate"
                      onclick="generate_voice()"
                    >
                      生成配音
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 文案提取内容 -->
        <div class="tab-content" id="content">
          <div class="content-container">
            <div class="content-header">
              <div class="content-input full-width">
                <div class="input-group">
                  <label for="contentExtractFile">文案提取(选择文件):</label>
                  <input
                    type="text"
                    placeholder="请选择字幕文件"
                    id="contentExtractFile"
                    value=""
                    readonly
                    onclick="chooseSingleIdentAudioFile('contentExtractFile')"
                    class="long-input"
                  />
                  <label id="contentExtractFile-duration" style="margin-left: 10px;">时长: 0分钟</label>
                  <button style='margin-left: 10px;' class="btn-primary" onclick="extract_content()">
                    提取文案
                  </button>
                </div>
              </div>
            </div>
            <div class="content-main">
              <div class="content-title">文案内容:</div>
              <textarea
                class="content-textarea"
                placeholder="请输入需要修改的文案"
                id="contentExtractTextarea"
              ></textarea>
              <div class="word-count">0 / 10000</div>
              <!-- TODO: 限制字数/动态改变文字数 -->
            </div>
            <div class="content-main">
              <div class="button-group">
                <button class="btn-option" onclick="rewrite_content()">
                  文案重写
                </button>
              </div>
            </div>
            <div class="content-main">
              <div class="content-title">修改后的文案内容:</div>
              <textarea
                class="content-textarea"
                placeholder="修改后的文案将显示在这里"
                id="rewrite-content"
                readonly
              ></textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      var shot_list_item = {
        normal: [], // 基础合成分镜列表
        advanced: [], // 高级合成分镜列表
        pro: [], // 专业合成分镜列表
        auto: {
          folder: "",
          priority: "分镜数量", // 1: 分镜数量 2: 视频时长 3: 音频时长
          count: 2, // 分镜数量
          duration: 1, // 视频时长
          transition_duration: 0.2, // 转场时长
          flip: "无",
          filter: null, // 滤镜
          mirror: null, // 转场特效
        }, // 自动混剪分镜列表
      };
      var item = {
        paramRange: 0.5,
        durationInput: 5,
        countInput: 5,
        normal: {},
        advanced: {},
        pro: {},
        auto: {},
      };
      var subtitle_data = [];
      var audio_models = [];
      var voiceModel = "";
      var voiceVoice = "";

      // 标签切换功能初始化函数
      function init() {
        new QWebChannel(parent.qt.webChannelTransport, function (channel) {
          Bridge = channel.objects.Bridge;

          Bridge.started.connect(function (msg) {
            showModal(msg);
          });
          Bridge.finished.connect(function (msg) {
            showModal(msg);
          });
          Bridge.failed.connect(function (msg) {
            showModal(msg);
          });

          /*  文件操作方法  */
          // 选择文件夹
          window.chooseFolder = function (eid) {
            Bridge.choose_folder(eid);
          };
          // 选择文件
          window.chooseFile = function (eid, suffix) {
            Bridge.choose_file(eid, suffix);
          };
          // 打开文件或者文件夹
          window.openFile = function (eid) {
            let path = document.getElementById(eid).value;
            if (path) {
              Bridge.open_file(path);
            }
          };
          window.shot_folder_input = function (channel, index, name, suffix) {
            if (!suffix) {
              suffix = "video";
            }
            Bridge.choose_folder_input(channel, index, name, suffix);
          };
          window.shot_file_input = function (channel, index, suffix) {
            Bridge.choose_file_input(channel, index, suffix);
          };
          // 自动混剪选择文件夹
          window.auto_mix_folder_input = function (eid) {
            Bridge.auto_mix_folder_input(eid);
          };
          Bridge.auto_mix_folder_result.connect(function (
            eid,
            path,
            count,
            min_duration,
            max_duration,
            sum_duration
          ) {
            shot_list_item.auto.folder = path;
            document.getElementById(eid).value = path;
            document.getElementById("auto-mix-video-count").innerText =
              "视频数量: " + count;
            document.getElementById("auto-mix-video-max").innerText =
              "最长视频: " + max_duration + "秒";
            document.getElementById("auto-mix-video-min").innerText =
              "最短视频: " + min_duration + "秒";
            document.getElementById("auto-mix-video-total").innerText =
              "素材总时长: " + sum_duration + "秒";
          });

          // 选择的文件夹信号槽
          Bridge.select_folder_result.connect(function (eid, path) {
            document.getElementById(eid).value = path;
          });
          // 返回智能分镜目录
          Bridge.select_files_result.connect(function (eid, files, count) {
            // 渲染基础合成分镜列表
            const tbody = document.getElementById("shotListBody");
            if (!tbody) {
              return;
            }
            tbody.innerHTML = files
              .map(
                (file_item) => `
                                        <tr data-id="">
                                            <td>
                                              <label class="custom-checkbox">
                                               <input type="checkbox" class="row-check" value="${file_item.file}">
                                               <span class="checkmark"></span>                
                                              </label>                                   
                                            </td>
                                            <td>${file_item.id}</td>
                                            <td>${file_item.file}</td>
                                            <td>${file_item.duration}</td>
                                            <td>${file_item.size}</td>
                                        </tr>
                                    `
              )
              .join("");

            document.getElementById("clipInputCount").innerText =
              "视频数量: " + count;
          });
          // 基础合成选择文件
          Bridge.select_folder_normal_shot_path_input.connect(function (
            channel,
            index,
            path,
            name,
            count
          ) {
            shot_list_item[channel].forEach((shot) => {
              if (shot.id === index) {
                shot.folder = path;
                shot[name] = count;
                refresh_table(channel);
              }
            });
          });

          window.clipInput = function () {
            Bridge.choose_folder_and_read_video_files("clipInput");
          };

          /*  操作逻辑  */
          // 开始分镜
          window.start_clip_video = function () {
            const table = document.getElementById("shotListBody");
            const rows = table.querySelectorAll("tbody tr");
            const selectedValues = [];

            rows.forEach((row) => {
              const checkbox = row.querySelector(
                "td:nth-child(1) input[type='checkbox']"
              );
              if (checkbox && checkbox.checked) {
                selectedValues.push(checkbox.value);
              }
            });
            if (selectedValues.length === 0) {
              showModal("请选择分镜");
              return;
            }

            let output_path = document.getElementById("clipOutput").value,
              selected = document.querySelector(
                'input[name="split_mode"]:checked'
              ).value;
            if (!output_path) {
              showModal("请选择输出目录");
              return;
            }
            let task_items = {
              task: "视频分镜",
              channel: selected,
              input_files: selectedValues,
              output_folder: output_path,
              arg: null,
            };
            if (selected === "scene") {
              task_items.arg = item.paramRange;
            } else if (selected === "duration") {
              task_items.arg = item.durationInput;
            } else if (selected === "count") {
              task_items.arg = item.countInput;
            }
            Bridge.start_worker(JSON.stringify(task_items));
          };
          // 基础合成
          window.start_normal_synthesis = function () {
            // 参数获取
            let video_groups = [];
            shot_list_item.normal.forEach((shot) => {
              if (shot.folder) {
                video_groups.push({
                  files: shot.folder,
                  rule: shot.rule === "随机" ? "random" : "unique",
                  duration: parseInt(
                    document.getElementById("normal-duration-input").value
                  ),
                });
              }
            });
            if (video_groups.length === 0) {
              showModal("请选择分镜");
              return;
            }
            let channel = "normal",
              num_outputs = parseInt(
                document.getElementById("normal-generate-count").value
              ),
              output_dir = document.getElementById("normal-output-dir").value,
              import_subtitle =
                document.getElementById("normal-by-subtitle").checked,
              subtitle_path = document.getElementById(
                "normal-subtitle-input"
              ).value,
              keep_original_audio =
                document.getElementById("normal-keep-audio").checked,
              auto_match_audio = document.getElementById(
                "normal-auto-match-audio"
              ).checked,
              audio_path = document.getElementById("normal-audio-input").value,
              audio_status = document.getElementById("normal-by-audio").checked,
              total_duration = 0,
              speed = parseFloat(
                document.getElementById("normal-speed-input").value
              ),
              video_priority = true,
              resolution = document.getElementById(
                "normal-resolution-select"
              ).value,
              set_title = false, // TODO: 实现高级设置
              set_background_music = false,
              set_overlay = false,
              set_cover = false,
              set_watermark = false,
              set_filters = false,
              kwargs = {};
            if (!output_dir) {
              showModal("请选择保存目录");
              return;
            }
            const params = {
              task: "视频合成",
              channels: channel,
              video_groups: video_groups,
              num_outputs: num_outputs,
              output_dir: output_dir,
              import_subtitle: import_subtitle,
              subtitle_path: subtitle_path,
              keep_original_audio: keep_original_audio,
              auto_match_audio: auto_match_audio,
              audio_path: audio_path,
              audio_status: audio_status,
              total_duration: total_duration,
              speed: speed,
              video_priority: video_priority,
              resolution: resolution,
              set_title: set_title,
              set_background_music: set_background_music,
              set_overlay: set_overlay,
              set_cover: set_cover,
              set_watermark: set_watermark,
              set_filters: set_filters,
              kwargs: kwargs,
            };
            Bridge.start_worker(JSON.stringify(params));
          };
          // 高级合成
          window.start_advanced_synthesis = function () {
            // 参数获取
            let video_groups = [];
            shot_list_item.advanced.forEach((shot) => {
              if (shot.folder) {
                let clip_status = null;
                if (shot.mirror === "水平") {
                  clip_status = "v";
                } else if (shot.mirror === "垂直") {
                  clip_status = "h";
                } else if (shot.mirror === "随机") {
                  clip_status = "random";
                }
                video_groups.push({
                  files: shot.folder,
                  rule: shot.rule === "随机" ? "random" : "unique",
                  duration: parseInt(shot.duration),
                  start_time: parseInt(shot.startTime),
                  flip: clip_status,
                });
              }
            });
            if (video_groups.length === 0) {
              showModal("请选择分镜");
              return;
            }

            let channel = "advanced",
              num_outputs = parseInt(
                document.getElementById("advanced-generate-count").value
              ),
              output_dir = document.getElementById("advanced-output-dir").value,
              import_subtitle = document.getElementById(
                "advanced-by-subtitle"
              ).checked,
              subtitle_path = document.getElementById(
                "advanced-subtitle-input"
              ).value,
              keep_original_audio = document.getElementById(
                "advanced-keep-audio"
              ).checked,
              auto_match_audio = document.getElementById(
                "advanced-auto-match-audio"
              ).checked,
              audio_path = document.getElementById(
                "advanced-audio-input"
              ).value,
              audio_status =
                document.getElementById("advanced-by-audio").checked,
              total_duration = 0,
              speed = parseFloat(
                document.getElementById("normal-speed-input").value
              ),
              video_priority = !document.getElementById(
                "advanced-video-priority"
              ).checked,
              resolution = document.getElementById(
                "advanced-resolution-select"
              ).value,
              set_title = false, // TODO: 实现高级设置
              set_background_music = false,
              set_overlay = false,
              set_cover = false,
              set_watermark = false,
              set_filters = false,
              kwargs = {};
            if (!output_dir) {
              showModal("请选择保存目录");
              return;
            }
            const params = {
              task: "视频合成",
              channels: channel,
              video_groups: video_groups,
              num_outputs: num_outputs,
              output_dir: output_dir,
              import_subtitle: import_subtitle,
              subtitle_path: subtitle_path,
              keep_original_audio: keep_original_audio,
              auto_match_audio: auto_match_audio,
              audio_path: audio_path,
              audio_status: audio_status,
              total_duration: total_duration,
              speed: speed,
              video_priority: video_priority,
              resolution: resolution,
              set_title: set_title,
              set_background_music: set_background_music,
              set_overlay: set_overlay,
              set_cover: set_cover,
              set_watermark: set_watermark,
              set_filters: set_filters,
              kwargs: kwargs,
            };
            Bridge.start_worker(JSON.stringify(params));
          };
          // 专业合成
          window.start_pro_synthesis = function () {
            // 参数获取
            let video_groups = [];
            shot_list_item.pro.forEach((shot) => {
              if (shot.folder) {
                let clip_status = null;
                if (shot.mirror === "水平") {
                  clip_status = "v";
                } else if (shot.mirror === "垂直") {
                  clip_status = "h";
                } else if (shot.mirror === "随机") {
                  clip_status = "random";
                }
                video_groups.push({
                  files: shot.folder,
                  rule: shot.rule === "随机" ? "random" : "unique",
                  audio: shot.audio,
                  audio_rule: shot.audio_rule,
                  flip: clip_status,
                });
              }
            });
            if (video_groups.length === 0) {
              showModal("请选择分镜");
              return;
            }

            let channel = "pro",
              num_outputs = parseInt(
                document.getElementById("pro-generate-count").value
              ),
              output_dir = document.getElementById("pro-output-dir").value,
              import_subtitle =
                document.getElementById("pro-by-subtitle").checked,
              subtitle_path =
                document.getElementById("pro-subtitle-input").value,
              keep_original_audio =
                document.getElementById("pro-keep-audio").checked,
              auto_match_audio = false,
              audio_path = "",
              audio_status = false,
              total_duration = 0,
              speed = parseFloat(
                document.getElementById("pro-speed-input").value
              ),
              video_priority = true,
              resolution = document.getElementById(
                "pro-resolution-select"
              ).value,
              set_title = false, // TODO: 实现高级设置
              set_background_music = false,
              set_overlay = false,
              set_cover = false,
              set_watermark = false,
              set_filters = false,
              kwargs = {};
            if (!output_dir) {
              showModal("请选择保存目录");
              return;
            }
            const params = {
              task: "视频合成",
              channels: channel,
              video_groups: video_groups,
              num_outputs: num_outputs,
              output_dir: output_dir,
              import_subtitle: import_subtitle,
              subtitle_path: subtitle_path,
              keep_original_audio: keep_original_audio,
              auto_match_audio: auto_match_audio,
              audio_path: audio_path,
              audio_status: audio_status,
              total_duration: total_duration,
              speed: speed,
              video_priority: video_priority,
              resolution: resolution,
              set_title: set_title,
              set_background_music: set_background_music,
              set_overlay: set_overlay,
              set_cover: set_cover,
              set_watermark: set_watermark,
              set_filters: set_filters,
              kwargs: kwargs,
            };
            Bridge.start_worker(JSON.stringify(params));
          };
          // 自动混剪
          window.start_auto_synthesis = function () {
            // 参数获取
            if (!shot_list_item.auto.folder) {
              showModal("请选择分镜");
              return;
            }

            let channel = "auto",
              num = shot_list_item.auto.count,
              rule = shot_list_item.auto.priority,
              times = shot_list_item.auto.duration,
              select_rule = document.getElementById("auto-select-rule").value,
              num_outputs = parseInt(
                document.getElementById("auto-generate-count").value
              ),
              output_dir = document.getElementById("auto-output-dir").value,
              import_subtitle =
                document.getElementById("auto-by-subtitle").checked,
              subtitle_path = document.getElementById(
                "auto-subtitle-input"
              ).value,
              keep_original_audio =
                document.getElementById("auto-keep-audio").checked,
              auto_match_audio = document.getElementById(
                "auto-auto-match-audio"
              ).checked,
              audio_path = document.getElementById("auto-audio-input").value,
              audio_status = document.getElementById("auto-by-audio").checked,
              total_duration = 0,
              speed = parseFloat(
                document.getElementById("auto-speed-input").value
              ),
              video_priority = true,
              resolution = document.getElementById(
                "auto-resolution-select"
              ).value,
              set_title = false,
              set_background_music = false,
              set_overlay = false,
              set_cover = false,
              set_watermark = false,
              set_filters = false,
              kwargs = {};
            if (!output_dir) {
              showModal("请选择保存目录");
              return;
            }
            const params = {
              task: "视频合成",
              channels: channel,
              video_groups: shot_list_item.auto.folder,
              num: num,
              rule: rule,
              times: times,
              select_rule: select_rule,
              num_outputs: num_outputs,
              output_dir: output_dir,
              import_subtitle: import_subtitle,
              subtitle_path: subtitle_path,
              keep_original_audio: keep_original_audio,
              auto_match_audio: auto_match_audio,
              audio_path: audio_path,
              audio_status: audio_status,
              total_duration: total_duration,
              speed: speed,
              video_priority: video_priority,
              resolution: resolution,
              set_title: set_title,
              set_background_music: set_background_music,
              set_overlay: set_overlay,
              set_cover: set_cover,
              set_watermark: set_watermark,
              set_filters: set_filters,
              kwargs: kwargs,
            };
            Bridge.start_worker(JSON.stringify(params));
          };

          // 字幕生成功能选择文件
          window.chooseSingleIdentAudioFile = function (eid) {
            Bridge.choose_single_ident_audio_file(eid);
          };
          Bridge.choose_single_ident_audio_file_result.connect(function (
            eid,
            file_path,
            duration
          ) {
            document.getElementById(eid).value = file_path;
            document.getElementById(eid + "-duration").innerText =
              "时长: " + duration / 60 + "分钟";
          });
          // 提取字幕
          window.extract_subtitle = function () {
            const file_path = document.getElementById(
              "single-subtitle-input"
            ).value;
            if (!file_path) {
              showModal("请选择音视频文件");
              return;
            }
            Bridge.batch_ident_audio(JSON.stringify([file_path]));
          };
          // 字幕提取结果
          Bridge.ident_result.connect(function (content) {
            let datas = JSON.parse(content);
            let subtitle_tbody = document.getElementById("subtitle-tbody");
            let context = [];
            for (let i = 0; i < datas.length; i++) {
              context.push(`
                                            <tr data-id="${i + 1}">
                                                <td>${i + 1}</td>
                                                <td>
                                                <label>
                                                <input class="subtitle-input" type="text" value="${
                                                  datas[i].text
                                                }"></label>
                                                </td>
                                            </tr>
                                        `);
              subtitle_data.push({
                id: i + 1,
                text: datas[i].text,
                start: datas[i].begin_time,
                end: datas[i].end_time,
              });
            }
            subtitle_tbody.innerHTML = context.join("");
            refresh_subtitle_table();
          });
          // 字幕保存
          window.save_subtitle = function () {
            Bridge.save_srt_file(JSON.stringify(subtitle_data));
          };

          // 文案提取
          window.extract_content = function () {
            const file_path =
              document.getElementById("contentExtractFile").value;
            if (!file_path) {
              showModal("请选择音视频文件");
              return;
            }
            Bridge.ident_audio_context(JSON.stringify([file_path]));
          };
          Bridge.ident_context_result.connect(function (content) {
            document.getElementById("contentExtractTextarea").textContent =
              content;
          });

          // 重写
          window.rewrite_content = function () {
            let content = document.getElementById(
              "contentExtractTextarea"
            ).textContent;
            Bridge.rewrite(content);
          };
          Bridge.rewrite_result.connect(function (content) {
            document.getElementById("rewrite-content").textContent = content;
          });

          // 音频合成
          window.load_audio_metrail = function () {
            Bridge.load_audio_model();
          };
          Bridge.load_audio_model_result.connect(function (content) {
            audio_models = JSON.parse(content);
            let audio_list_element = document.querySelector(".voice-grid");
            if (!audio_list_element) {
              return;
            }
            audio_list_element.innerHTML = audio_models
              .map(
                (model) => `
                                        <div class="voice-card" data-index="${model.tone_name}">
                                            <div class="voice-info">
                                                <div class="voice-avatar">
                                                    <span>S</span>
                                                    <span class="voice-model" style="display:none;">${model.model}</span>
                                                    <span class="voice-voice" style="display:none;">${model.voice}</span>
                                                </div>
                                                <div class="voice-name">
                                                    <span>${model.tone_name}</span>
                                                    <br>
                                                    <span class="voice-lang">${model.use_case}</span>
                                                </div>
                                                <div class="voice-badge">
                                                    <audio class="audioPlayer" controls>
                                                        <source src="${model.object_name}" type="audio/mpeg">
                                                    </audio>
                                                    <button class="btn-try" onclick="togglePlayPause(this)">试听</button>
                                                </div>
                                            </div>
                                        </div>
                                    `
              )
              .join("");
            // 为每个音频卡片添加点击事件监听器
            document.querySelectorAll(".voice-card").forEach((card) => {
              card.addEventListener("click", () => {
                // 清除其他卡片的选中状态
                document
                  .querySelectorAll(".voice-card.selected")
                  .forEach((selectedCard) => {
                    selectedCard.classList.remove("selected");
                  });
                // 标记当前卡片为选中状态
                card.classList.add("selected");
                // 获取选中的卡片信息
                voiceModel = card.querySelector(".voice-model").textContent;
                voiceVoice = card.querySelector(".voice-voice").textContent;
              });
            });
          });

          // 生成配音
          window.generate_voice = function () {
            let speed = document.getElementById("voice-speed-slider").value,
              pitch = document.getElementById("voice-pitch-slider").value,
              volume = document.getElementById("voice-volume-slider").value;
            let output_dir = document.getElementById(
              "synthesis-audio-save-path"
            ).value;
            if (!output_dir) {
              showModal("请选择保存目录");
              return;
            }
            if (!voiceModel) {
              showModal("音频模型未选择");
              return;
            }
            let context = document.getElementById(
              "synthesis-voice-input"
            ).value;
            if (!context) {
              showModal("请先输入文案");
              return;
            }
            Bridge.synthesis_audio(
              JSON.stringify({
                text: context,
                model: voiceModel,
                voice: voiceVoice,
                speed: parseFloat(speed),
                pitch: parseFloat(pitch),
                volume: parseInt(volume),
              })
            );
          };

          // 停止
          window.stop_worker = function () {
            Bridge.stop();
          };
        });

        window.togglePlayPause = function (button) {
          // 获取当前按钮对应的音频元素
          const audioPlayer = button.previousElementSibling; // 获取<button>之前的<audio>元素
          if (audioPlayer.paused) {
            // 如果音频处于暂停状态，则播放
            audioPlayer.play();
            button.textContent = "暂停"; // 更新按钮文本
          } else {
            // 如果音频正在播放，则暂停
            audioPlayer.pause();
            button.textContent = "试听"; // 更新按钮文本
          }
        };

        window.advanced_settings = function () {
          // TODO: 显示弹窗设置
        };

        window.renderParamSetting = function (mode) {
          const container = document.getElementById("param-setting");
          container.innerHTML = ""; // 清空之前的内容

          if (mode === "scene") {
            // 滑动条参数（0.2 ~ 0.9）
            const sliderDiv = document.createElement("div");
            sliderDiv.className = "slider-group";
            sliderDiv.innerHTML = `
                <div class="range-container">
                 <input 
                  type="range"
                  id="paramRange"
                  min="0.2"
                  max="0.9"
                  step="0.01"
                  value="${item.paramRange}" 
                  class="custom-range"
                >
                </div>
                <span id="paramValue">${item.paramRange}</span>
                            `;
            container.appendChild(sliderDiv);
            document
              .getElementById("paramRange")
              .addEventListener("input", function () {
                document.getElementById("paramValue").textContent = this.value;
                item.paramRange = this.value;
              });
          } else if (mode === "duration") {
            // 输入框，单位：秒
            container.innerHTML = `
                      <div class="number-input-container">
                        <input 
                          type="number"
                          id="durationInput"
                          step="1"
                          min="1"
                          value="${item.durationInput}" 
                          class="custom-number-input"
                        >
                        <span class="unit-label">秒</span>
                      </div>
                            `;
            document
              .getElementById("durationInput")
              .addEventListener("input", function () {
                item.durationInput = this.value;
              });
          } else if (mode === "count") {
            // 输入框，单位：个分镜
            container.innerHTML = `
                      <div class="number-input-container">
                        <input 
                          type="number"
                          id="countInput"
                          step="1"
                          min="1"
                          value="${item.countInput}" 
                          class="custom-number-input"
                        >
                        <span class="unit-label">个分镜</span>
                      </div>
                            `;
            document
              .getElementById("countInput")
              .addEventListener("input", function () {
                item.countInput = this.value;
              });
          } else {
            container.innerHTML = `<span style="color: #888;">该模式不需要参数设置</span>`;
          }
        };
        renderParamSetting("scene");

        // 获取滑块和显示值的元素
        let voiceSpeedSlider = document.getElementById("voice-speed-slider"),
          voiceSpeedValue = document.getElementById("voice-speed-slider-value"),
          voicePitchSlider = document.getElementById("voice-pitch-slider"),
          voicePitchValue = document.getElementById("voice-pitch-slider-value"),
          voiceVolumeSlider = document.getElementById("voice-volume-slider"),
          voiceVolumeValue = document.getElementById(
            "voice-volume-slider-value"
          );

        // 监听滑块值的变化
        voiceSpeedSlider.addEventListener("input", () => {
          voiceSpeedValue.textContent = voiceSpeedSlider.value;
        });

        voicePitchSlider.addEventListener("input", () => {
          voicePitchValue.textContent = voicePitchSlider.value;
        });

        voiceVolumeSlider.addEventListener("input", () => {
          voiceVolumeValue.textContent = voiceVolumeSlider.value;
        });

        // 监听单选框变化
        document
          .querySelectorAll('input[name="split_mode"]')
          .forEach((radio) => {
            radio.addEventListener("change", function () {
              renderParamSetting(this.value);
            });
          });

        document
          .getElementById("autoShotCount")
          .addEventListener("input", function () {
            shot_list_item.auto.count = this.value;
          });
        document
          .getElementById("autoShotDuration")
          .addEventListener("input", function () {
            shot_list_item.auto.duration = this.value;
          });

        // 绑定全选框
        document
          .getElementById("selectAll")
          .addEventListener("change", function () {
            const isChecked = this.checked;
            document
              .querySelectorAll(".row-check")
              .forEach((cb) => (cb.checked = isChecked));
          });

        // 绑定每个行复选框：当所有被选中时自动勾选表头全选
        document.querySelectorAll(".row-check").forEach((cb) => {
          cb.addEventListener("change", function () {
            const all = document.querySelectorAll(".row-check");
            const checked = document.querySelectorAll(".row-check:checked");
            document.getElementById("selectAll").checked =
              all.length === checked.length;
          });
        });

        window.refresh_subtitle_table = function () {
          let subtitle_items = document.querySelectorAll(".subtitle-input");
          if (subtitle_items) {
            subtitle_items.forEach((sbd) => {
              sbd.addEventListener("input", function () {
                const data_id = parseInt(
                  this.parentNode.parentNode.parentNode.getAttribute("data-id")
                );
                for (let data of subtitle_data) {
                  if (parseInt(data.id) === data_id) {
                    data.text = this.value;
                  }
                }
              });
            });
          }
        };

        window.refresh_table = function (type) {
          if (type === "normal") {
            // 渲染基础合成分镜列表待支
            const tbody = document.getElementById("shotListBody-synthesis");
            if (!tbody) {
              return;
            }
            tbody.innerHTML = shot_list_item.normal
              .map(
                (shot) => `
                                    <tr data-id="${shot.id}">
                                        <td>${shot.id}</td>
                                        <td>
                                            <input type="text" class="normal-shot-name" value="${
                                              shot.name
                                            }">
                                        </td>
                                        <td>
                                            <label><input type="text" readonly onclick="shot_folder_input('normal', ${
                                              shot.id
                                            }, 'count', 'video')" class="normal-shot-folder-path-input" placeholder="请选择分镜文件夹" value="${
                  shot.folder
                }"></label>
                                        </td>
                                        <td>${shot.count || ""}</td>
                                        <td>
                                           <select class="custom-select" onchange="updateShotData('normal', ${
                                             shot.id
                                           },  'rule', this.value)"> 
                                              <option value="随机" ${
                                                shot.rule === "随机"
                                                  ? "selected"
                                                  : ""
                                              }>随机</option>
                                              <option value="去重" ${
                                                shot.rule === "去重"
                                                  ? "selected"
                                                  : ""
                                              }>去重</option>
                                           </select>
                                        </td>
                                        <td>
                                            <a href="#" class="delete-btn" onclick="DeleteShot('normal', ${
                                              shot.id
                                            })">删除</a>
                                        </td>
                                    </tr>
                                `
              )
              .join("");
          } else if (type === "advanced") {
            const tbody = document.getElementById("shotListBody-advanced");
            if (!tbody) return;
            tbody.innerHTML = shot_list_item.advanced
              .map(
                (shot) => `
                                <tr data-id="${shot.id}">
                                    <td>
                                        <input type="text" class="advanced-shot-name" value="${
                                          shot.name
                                        }">
                                    </td>
                                    <td>${shot.count}</td>
                                    <td>
                                        <div class="import-controls">
                                            <input type="text" class="advanced-shot-folder-path-input" style="display: none;" value="${
                                              shot.folder
                                            }">
                                            <button class="btn-primary btn-small" onclick="shot_folder_input('advanced', ${
                                              shot.id
                                            }, 'count', 'video')">导入文件夹</button>
                                            <button class="btn-primary btn-small" onclick="shot_file_input('advanced', ${
                                              shot.id
                                            }, 'mp4')">导入文件</button>
                                            <select style='padding:5px;font-size:16px' class="short-select" onchange="updateShotData('advanced', ${
                                              shot.id
                                            }, 'rule', this.value)">
                                                <option value="随机" ${
                                                  shot.rule === "随机"
                                                    ? "selected"
                                                    : ""
                                                }>随机</option>
                                                <option value="去重" ${
                                                  shot.rule === "去重"
                                                    ? "selected"
                                                    : ""
                                                }>去重</option>
                                            </select>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="shot-settings">
                                            <div class="setting-group">
                                                <label>分镜时长(秒):</label>
                                                  <label style="margin-right: 10px;margin-top:5px">
                                                   <div class="number-input-container">
                                                     <input
                                                      type="number"
                                                      value="${shot.duration}"
                                                      class="custom-number-input"
                                                     />
                                                   </div>
                                                </label>
                                            </div>
                                            <div class="setting-group">
                                                <label>分镜规则:</label>
                                                <select style='padding:5px;font-size:16px;margin-right:10px;margin-top:10px' class="medium-select" onchange="updateShotData('advanced', ${
                                                  shot.id
                                                }, 'clip_rule', this.value)">
                                                    <option value="截取" ${
                                                      shot.rule === "截取"
                                                        ? "selected"
                                                        : ""
                                                    }>截取</option>
                                                </select>
                                            </div>
                                            <div class="setting-group">
                                                <label>开始时间(秒):</label>
                                                <label style="margin-right: 10px;margin-top:5px">
                                                   <div class="number-input-container">
                                                     <input
                                                      type="number"
                                                      value="${shot.startTime}"
                                                      class="custom-number-input"
                                                     />
                                                   </div>
                                                </label>
                                            </div>
                                            <div class="setting-group">
                                                <label>镜像:</label>
                                                <select style='padding:5px;font-size:16px;margin-right:10px;margin-top:10px' class="short-select" onchange="updateShotData('advanced', ${
                                                  shot.id
                                                }, 'mirror', this.value)">
                                                    <option value="">无</option>
                                                    <option value="水平" ${
                                                      shot.mirror === "水平"
                                                        ? "selected"
                                                        : ""
                                                    }>水平</option>
                                                    <option value="垂直" ${
                                                      shot.mirror === "垂直"
                                                        ? "selected"
                                                        : ""
                                                    }>垂直</option>
                                                </select>
                                            </div>
                                            <div class="setting-group">
                                                <label style='margin-bottom:15px;'>滤镜:</label>
                                                <!-- TODO: 待实现 -->
                                                <a style='margin-bottom:7px;' href="#" class="blue-link">${
                                                  shot.filter
                                                }</a>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <a href="#" class="delete-btn" onclick="DeleteShot('advanced', ${
                                          shot.id
                                        })">删除</a>
                                    </td>
                                </tr>
                            `
              )
              .join("");
          } else if (type === "pro") {
            const tbody = document.getElementById("shotListBody-pro");
            if (!tbody) return;
            tbody.innerHTML = shot_list_item.pro
              .map(
                (shot) => `
                                <tr data-id="${shot.id}">
                                    <td>
                                        <input type="text" class="advanced-shot-name" value="${
                                          shot.name
                                        }">
                                    </td>
                                    <td>
                                        <div class="count-group">
                                            <div style='margin-bottom:10px'>视频数量: ${
                                              shot.count
                                            }</div>
                                            <div>配音数量: ${
                                              shot.audio_count
                                            }</div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="import-controls">
                                            <div class="import-group">
                                                <label>导入视频:</label>
                                                <input type="text" class="pro-shot-folder-path-input" style="display: none;" value="${
                                                  shot.folder
                                                }">
                                                <button class="btn-primary btn-small" onclick="shot_folder_input('pro', ${
                                                  shot.id
                                                }, 'count', 'video')">导入文件夹</button>
                                                <button class="btn-primary btn-small" onclick="shot_file_input('pro', ${
                                                  shot.id
                                                }, 'mp4')">导入文件</button>
                                                <select class="short-select-new" onchange="updateShotData('pro', ${
                                                  shot.id
                                                }, 'rule', this.value)">
                                                    <option value="随机" ${
                                                      shot.rule === "随机"
                                                        ? "selected"
                                                        : ""
                                                    }>随机</option>
                                                    <option value="去重" ${
                                                      shot.rule === "去重"
                                                        ? "selected"
                                                        : ""
                                                    }>去重</option>
                                                </select>
                                            </div>
                                            <div class="import-group">
                                                <label>导入配音:</label>
                                                <input type="text" class="pro-shot-audio-path-input" style="display: none;" value="${
                                                  shot.audio
                                                }">
                                                <button class="btn-primary btn-small" onclick="shot_folder_input('pro', ${
                                                  shot.id
                                                }, 'audio_count', 'audio')">导入文件夹</button>
                                                <button class="btn-primary btn-small" onclick="shot_file_input('pro', ${
                                                  shot.id
                                                }, 'mp3')">导入文件</button>
                                                <select class="short-select-new" onchange="updateShotData('pro', ${
                                                  shot.id
                                                }, 'audio_rule', this.value)">
                                                    <option value="随机" ${
                                                      shot.rule === "随机"
                                                        ? "selected"
                                                        : ""
                                                    }>随机</option>
                                                    <option value="去重" ${
                                                      shot.rule === "去重"
                                                        ? "selected"
                                                        : ""
                                                    }>去重</option>
                                                </select>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <select class="short-select-new" onchange="updateShotData('pro', ${
                                          shot.id
                                        }, 'mirror', this.value)">
                                                <option value="">无</option>
                                                <option value="水平" ${
                                                  shot.mirror === "水平"
                                                    ? "selected"
                                                    : ""
                                                }>水平</option>
                                                <option value="垂直" ${
                                                  shot.mirror === "垂直"
                                                    ? "selected"
                                                    : ""
                                                }>垂直</option>
                                            </select>
                                    </td>
                                    <td>
                                        <a href="#" class="delete-btn" onclick="DeleteShot('pro', ${
                                          shot.id
                                        })">删除</a>
                                    </td>
                                </tr>
                            `
              )
              .join("");
          } else if (type === "auto") {
            document.getElementById("auto-mix-folder-input").value =
              shot_list_item.auto.folder;
            document.getElementById("autoShotCount").value =
              shot_list_item.auto.count;
            document.getElementById("autoShotDuration").value =
              shot_list_item.auto.duration;
            document.getElementById("translateDuration").value =
              shot_list_item.auto.transition_duration;
          }
          bindEventListeners();
        };

        // 视频合成分镜列表
        window.AddShot = function (type) {
          let shot_id =
              shot_list_item[type].length > 0
                ? Math.max(...shot_list_item[type].map((s) => s.id)) + 1
                : 1,
            shot_name = `分镜${shot_id}`,
            shot_folder = "",
            shot_count = "",
            shot_rule = "随机",
            shot = {};

          if (type === "normal") {
            shot = {
              id: shot_id,
              name: shot_name,
              folder: shot_folder,
              count: shot_count,
              rule: shot_rule,
            };
          } else if (type === "advanced") {
            shot = {
              id: shot_id,
              name: shot_name,
              folder: shot_folder,
              count: shot_count,
              rule: shot_rule,
              duration: 0,
              startTime: 0,
              clip_rule: "截取",
              mirror: "无",
              filter: "无",
            };
          } else if (type === "pro") {
            shot = {
              id: shot_id,
              name: shot_name,
              folder: shot_folder,
              count: 0,
              rule: shot_rule,
              audio: "",
              audio_count: 0,
              audio_rule: shot_rule,
              mirror: "无",
              filter: "无",
            };
          }
          shot_list_item[type].push(shot);
          refresh_table(type);
        };
        // 删除分镜
        window.DeleteShot = function (type, shot_id) {
          shot_list_item[type] = shot_list_item[type].filter(
            (shot) => shot.id !== shot_id
          );
          refresh_table(type);
        };
        // 清空分镜
        window.ClearShot = function (type) {
          shot_list_item[type] = [];
          refresh_table(type);
        };
        // 顶部标签切换
        document.querySelectorAll(".tab-nav .tab-item").forEach((tab) => {
          tab.addEventListener("click", () => {
            document.querySelectorAll(".tab-nav .tab-item").forEach((t) => {
              t.classList.remove("active");
            });
            tab.classList.add("active");

            const tabId = tab.getAttribute("data-tab");
            document.querySelectorAll(".tab-content").forEach((content) => {
              content.classList.remove("active");
            });
            document.getElementById(tabId).classList.add("active");

            if (tabId === "voice") {
              load_audio_metrail();
            }

            // 确保切换到视频合成标签时，显示默认的基础合成内容
            if (tabId === "synthesis") {
              // 设置基础合成为默认选中的二级导航
              const synthesisNav = document.querySelector(
                "#synthesis .sub-nav"
              );
              synthesisNav.querySelectorAll(".sub-nav-item").forEach((item) => {
                item.classList.remove("active");
              });
              synthesisNav
                .querySelector(".sub-nav-item:first-child")
                .classList.add("active");

              // 显示基础合成的内容
              const synthesisContent = document.querySelector(
                "#synthesis .synthesis-content"
              );
              synthesisContent
                .querySelectorAll(".content-section")
                .forEach((section) => {
                  section.classList.remove("active");
                });
              synthesisContent
                .querySelector(".synthesis-basic")
                .classList.add("active");
            }
          });
        });
        // 视频合成二级导航切换
        document.querySelectorAll(".sub-nav-item").forEach((item) => {
          item.addEventListener("click", () => {
            // 移除所有导航项的激活状态
            const parentNav = item.closest(".sub-nav");
            parentNav.querySelectorAll(".sub-nav-item").forEach((i) => {
              i.classList.remove("active");
            });
            item.classList.add("active");

            // 获取对应的内容区域类名
            let contentType;
            if (item.closest("#material")) {
              // 素材库的二级导航
              contentType =
                item.textContent === "智能分镜"
                  ? "smart-shot"
                  : "online-material";
            } else if (item.closest("#synthesis")) {
              // 视频合成的二级导航
              const text = item.textContent.toLowerCase().replace(/\s+/g, "-");
              switch (text) {
                case "基础合成":
                  contentType = "synthesis-basic";
                  break;
                case "高级合成":
                  contentType = "synthesis-advanced";
                  break;
                case "专业合成":
                  contentType = "synthesis-pro";
                  break;
                case "自动混剪":
                  contentType = "synthesis-auto";
                  break;
                case "分组合成":
                  contentType = "synthesis-group";
                  break;
                default:
                  contentType = "synthesis-basic";
              }
            }

            // 隐藏所有内容
            const parentContent = item.closest("#synthesis")
              ? document.querySelector(".synthesis-content")
              : item.closest(".tab-content");
            parentContent
              .querySelectorAll(".content-section")
              .forEach((section) => {
                section.classList.remove("active");
              });
            // 显示对应内容
            const targetSection = parentContent.querySelector(
              `.${contentType}`
            );
            if (targetSection) {
              targetSection.classList.add("active");
            } else {
            }
          });
        });
        // 文件夹树交互
        document.querySelectorAll(".folder-item").forEach((folder) => {
          const header = folder.querySelector(".folder-header");
          if (!header) return;

          header.addEventListener("click", (e) => {
            e.stopPropagation();

            folder.classList.toggle("expanded");
            const content = folder.querySelector(".folder-content");
            if (content) {
              content.classList.toggle("expanded");
            }

            const icon = header.querySelector(".folder-icon");
            if (icon) {
              icon.textContent = folder.classList.contains("expanded")
                ? "⯆"
                : "⯈";
            }

            document.querySelectorAll(".folder-item").forEach((f) => {
              if (f !== folder) f.classList.remove("active");
            });
            folder.classList.add("active");
          });
        });
        // 文件点击事件
        document.querySelectorAll(".file-item").forEach((file) => {
          file.addEventListener("click", (e) => {
            e.stopPropagation();

            // 移除其他文件的选中状态
            document.querySelectorAll(".file-item").forEach((f) => {
              f.classList.remove("active");
            });

            // 添加当前文件的选中状态
            file.classList.add("active");

            // 移除所有文件夹的选中状态
            document.querySelectorAll(".folder-item").forEach((f) => {
              f.classList.remove("active");
            });

            const fileName = file.textContent.replace("📄 ", "");
            updateVideoGrid(fileName);
          });
        });

        /* 分割符 */
        // 更新数据
        window.updateShotData = function (channel, id, field, value) {
          const shot = shot_list_item[channel].find((item) => item.id === id);
          if (shot) {
            shot[field] = value;
          }
        };

        window.showModal = function (message) {
          document.getElementById("message").innerText = message;
          document.getElementById("overlay").style.display = "block";
          document.getElementById("modal").style.display = "block";
        };

        window.closeModal = function () {
          document.getElementById("overlay").style.display = "none";
          document.getElementById("modal").style.display = "none";
        };

        // 监听表格的输入事件
        window.bindEventListeners = function () {
          window.getShotIdFromRow = function (element) {
            return element.closest("tr").getAttribute("data-id");
          };

          let params_monitor_function = function (elm, channel, key) {
            document.querySelectorAll(elm).forEach((input) => {
              input.addEventListener("input", function (event) {
                const id = getShotIdFromRow(event.target);
                const newName = event.target.value;
                updateShotData(channel, id, key, newName);
              });
            });
          };

          // 基础合成
          params_monitor_function(".normal-shot-name", "normal", "name");
          params_monitor_function(
            ".normal-shot-folder-path-input",
            "normal",
            "folder"
          );
          // 高级合成
          params_monitor_function(".advanced-shot-name", "advanced", "name");
          params_monitor_function(
            ".advanced-shot-folder-path-input",
            "advanced",
            "folder"
          );
          params_monitor_function(
            ".advanced-storyboard-duration-input",
            "advanced",
            "duration"
          );
          params_monitor_function(
            ".advanced-start-time-input",
            "advanced",
            "startTime"
          );
          // 专业合成
          params_monitor_function(".pro-name-input", "pro", "name");
          params_monitor_function(
            ".pro-shot-folder-path-input",
            "pro",
            "folder"
          );
          params_monitor_function(".pro-shot-audio-path-input", "pro", "audio");
        };
      }

      // 初始渲染

      if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", init);
      } else {
        init();
      }
    </script>
  </body>
</html>
